Home
Blogger Tutorials

How to Add Dummy Placeholder Text in Blogger (HTML & CSS Guide)

Techno Praveen

Welcome back to the blog! Today’s tutorial explains how to add dummy placeholder text to your Blogger posts. This feature helps designers, developers, and content creators preview layout and styling without manually typing long text. All you need to do is paste the ready-made code into your post.

How to Add Dummy Placeholder Text in Blogger (HTML & CSS Guide)
How to Add Dummy Placeholder Text in Blogger | Techno Praveen

Dummy Text Feature for Blogger

This tool lets you insert realistic placeholder text using simple HTML + CSS without slowing down your page. If you want to add dummy text to your Blogger article, just follow the steps below.

Related Tutorials:

From your Blogger Dashboard, select the blog where you want to add this feature.

  • Go to Theme → Edit HTML
  • Press Ctrl + F and search for ]]></b:skin>
  • Paste the CSS code above that closing tag

Note:
There are two dummy-text styles available. Choose the one that fits your design.

Style One — Dummy Text Blocks

.dummy-text{display:block}
.dummy-text i{display:block;height:16px;margin-bottom:8px;background:#a9a8ac;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}

To display this dummy text inside your post, copy and paste the following HTML:

<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>

Style Two — Minimal Dummy Blocks

.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%}

Copy and paste this HTML code inside your Blogger post:

<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>

Done!
This concludes our guide on "How to Add Dummy Text to Blogger". We’ll meet again in another helpful tutorial — stay safe and have a wonderful day! 🙂

Post a Comment