Hello Everyone! Welcome back to FreemiumTech website. How are you all? I hope you are all well. Toady our tutorial is about How to add Dummy Text with CSS in Blogger Post. If you provide tutorials about HTML, CSS and JavaScript or widgets in your site usually you provide demo of it. or Dummy text may be used to display a sample of fonts, generate text for testing.

But if you provide a demo in a blank post it will not look much better for the users. It is better to provide Demo of any widgets with a dummy texts so it looks much better between the texts.

In this Article we will learn How to add Dummy Text with CSS in Blogger Post. so read the full post and say your opinion in comments section.

Let's Have a Look!

Preview

How to add Dummy Text in Blogger Post?

Step 1: Login to your Blogger Dashboard

Step 2: Go to Themes section

Step 3: Click on the Drop down arrow and select Edit HTML

Step 4: Now search for ]]></b:skin> and paste the following CSS just above it

I have provided 2 styles of Dummy text you can use any of them

This is Style 1

 /* Dummy Text Style 1 by FreemiumTech */
.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}

Step 5: Now create a New post or edit a existing post to add this dummy text

Step 6: Now click on the pencil icon in the top left corner and switch to HTML view

Step 7: Now 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>
<p class="dummy-text">
  <i style="margin-left: 10%;"></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i style="width: 30%;"></i>
  </p>

This is Style 2

Step 8: Go to Themes section

Step 9: Click on the Drop down arrow and select Edit HTML

Step 10: Now search for ]]></b:skin> and paste the following CSS just above it

   /* Dummy Text Style 2 FreemiumTech */
  .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%}

Step 11: Now create a New post or edit a existing post to add this dummy text.

Step 12: Now click on the pencil icon in the top left corner and switch to HTML view.

Step 13: Now copy and paste the following HTML.

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

Now click on save if you have followed all steps!

Conclusion

In this post I have made a tutorial about How to add Dummy Text in Blogger Post? I hope you have liked it and please share with your friends and follow our blog for more.

If you face any problems in this code or have any questions so feel free to ask me in comments section or join our Telegram Group for discussion.

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken.

Join Telegram

Go to Link