How to Create Dummy Text Content on Blogger

How to Create Dummy Text Content on Blogger
How to Create Dummy Text Content on Blogger



Dummy Text Content on Blogger - What is dummy text content? In graphic design dummy text is often used as a temporary sample text in a design layout .

Well, in the world of blogs it's the same, dummy text can be used to display font samples, generate text for testing or sample writing content on blogs.

Blogs with tutorial content for HTML, CSS and Javascript or Widgets are certainly no strangers to Dummy Text. Provides Demo widget with dummy text. Then how to make it?

How to Make Dummy Text Content on Blogger

Dummy text content usually contains Lorem Ipsum text or sentences . But in this post I will share how to add Dummy Text using CSS on Blogger.

How to Make Dummy Text with CSS on Blogger

  1. Enter pagedraft.blogger.com
  2. Click Theme > click Drop down > Edit HTML
  3. Search code]]></b:skin>
  4. Continue Copy then Paste the following code right above it

  5. /* Dummy Text Style 1 */
      .dummy-text{display:block}
      .dummy-text i{display:block;height:16px;margin-bottom:8px;background:#f2f1f7;border-radius:2px;}
      .dummy-text i.img{margin:0 auto;max-width:85%;height:180px;border-radius:10px}
      .dummy-header{position:relative;background:#fff;border-radius:6px;padding:15px 15px;box-shadow:0 2px 4px 0 rgba(0,0,0,.05)}
      .dummy-header .flex{display:flex;display:-webkit-flex}
      .dummy-header .flex i{width:60px;margin:0 10px 0 0}
      .dummy-header .flex i:last-child{margin:0}
    /* Dummy Text Style 2 */
      .dummyText i{display:block;background-color:rgba(0,0,0,.05);margin-bottom:10px;height:1.5em}
      .dummyText i.img{height:auto;min-height:200px;margin:2rem 10%}

  6. If you have Click Save

How to Apply Dummy Text in Blogger Posts or Pages

  1. Enter pagedraft.blogger.com
  2. Create a new post or page
  3. Change to HTML view
  4. Then Copy and Paste the following HTML code
  5. /* Use the following HTML Dummy Text for CSS Style 1 */
      <p class="dummy-text">
        <i style="margin-left: 10%;"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i style="width: 30%;"></i>
      </p>
      <p class="dummy-text">
        <i style="margin-left: 10%;"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i style="width: 30%;"></i>
      </p>
      <p class="dummy-text">
        <i style="margin-left: 10%;"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i style="width: 30%;"></i>
        </p>
    /* Use the following HTML Dummy Text for CSS Style 2 */
      <p class="dummyText">
        <i style="margin-left: 10%;"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i style="width: 30%;"></i>
      </p>
      <p class="dummyText">
        <i style="margin-left: 10%;"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i style="width: 30%;"></i>
      </p>
      <p class="dummyText">
        <i style="margin-left: 10%;"></i>
        <i></i>
        <i></i>
        <i></i>
        <i></i>
        <i style="width: 30%;"></i>
      </p>
  6. If you have Click Save or Publish

Demo Dummy Text Content

Closing

So, that was How to Make Dummy Text Content on Blogger . Hopefully this article can be useful. You can also share and recommend to friends who need it.

1 Comments

Welcome to Jehangir Khan's Tech Blog! We're thrilled to have you join the conversation. Your comments and feedback are valuable to us and help us create a community of tech enthusiasts who share ideas and insights. We encourage you to share your thoughts related to the post and engage in a respectful and meaningful conversation with others. Please refrain from spamming or promoting your own content in the comments section. We also ask that you avoid using inappropriate language or attacking others. Please note that all comments will be reviewed before they are posted, and we reserve the right to remove any comments that violate our policies. Let's explore the world of technology together and inspire each other to achieve our goals!

Previous Post Next Post