Home
Blogger
Code

How to Add Dummy Text in Blogger

In this tutorial, you will learn how to add dummy text with CSS in Blogger. You can use this to display sample fonts and create text for testing.
Admin

Hello Everyone! Welcome back to Dev Orbital. Today’s tutorial is How to Add Dummy Text with CSS in Blogger. If you post tutorials about HTML, CSS, JavaScript, or widgets, you often show a demo. Dummy text helps display sample fonts or test layouts.

Providing a demo with blank space doesn’t look appealing. Instead, use dummy text to make your demo section look more complete and professional.

In this post, we’ll learn How to Add Dummy Text with CSS in Blogger. Read till the end and share your feedback in the comments section.

Table of Contents

How to Add Dummy Text with CSS in Blogger?

  1. Step 1: Login to your Blogger Dashboard.
  2. Step 2: Go to the Themes section.
  3. Step 3: Click the dropdown arrow and select Edit HTML.
  4. Step 4: Search for ]]></b:skin> and paste the following CSS just above it.

You can choose from two styles of dummy text below.

Style 1

/* Dummy Text Style 1 by TechyDarshaN */
.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 { background: #fff; border-radius: 6px; padding: 15px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.dummy-header .flex { display: flex; }
.dummy-header .flex i { width: 60px; margin-right: 10px; }
.dummy-header .flex i:last-child { margin-right: 0; }
Related Posts
  1. Step 5: Create a new post or edit an existing one.
  2. Step 6: Switch to HTML view.
  3. Step 7: Paste the following HTML snippet:
<p class="dummy-text">
  <i style="margin-left:10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width:30%;"></i>
</p>

Style 2

  1. Step 8: Go to the Themes section.
  2. Step 9: Click the dropdown arrow and select Edit HTML.
  3. Step 10: Search for ]]></b:skin> and paste the following CSS above it.
/* Dummy Text Style 2 */
.dummyText i { display: block; background-color: rgba(0,0,0,0.05); margin-bottom: 10px; height: 1.5em; }
.dummyText i.img { height: auto; min-height: 200px; margin: 2rem 10%; }
  1. Step 11: Create a new post or edit an existing one.
  2. Step 12: Switch to HTML view.
  3. Step 13: Paste the following HTML snippet:
<p class="dummyText">
  <i style="margin-left:10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width:30%;"></i>
</p>

Conclusion

In this article, we learned How to Add Dummy Text with CSS in Blogger — useful for showing sample fonts, testing layouts, or filling demo content. Hope you found it helpful. Share this tutorial with your friends and follow our blog for more updates.

Post a Comment