How to add dummy text in Blogger [New Updated]

Hello everyone! Welcome to Smart Tech Carry, you might be finding the best way to show a demo of your widget or your code and if you do not want to write an article for that then dummy text is the best option for you. 

we don't recommend it to use instead of the article but you can use it for showing the demo of your widget or code that is published on your website.

So in this article, we are going to show you how to add dummy text in Blogger. So without wasting any time let's check!

How to add dummy text in Blogger?

Before doing these steps we recommend you to take a backup of your template by chance if any mistake happens in HTML you can restore it later.

We provide you two styles you can use any style of dummy text.

Style 1

First, go to your Blogger dashboard

Then click on the Theme option

Then click on the drop-down icon near Customize option

Then click on the Edit HTML option

Then find ]]></b:skin> and paste this CSS just above it

/* Dummy text by Shiva Technic World */
.dummy-text{display:block}
.dummy-text i{display:block;height:16px;margin-bottom:8px;background:#f2f1f7;border-radius:30px;}
.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}
.drK .dummy-text i{background:#252526;}

If your template supports dark mode then don't forget to change highlighted drK with your template dark mode class.

Then save HTML

Now go to the post or page that you want to add dummy text and switch Compose view to HTML view and paste this HTML code

<!--[ Dummy text style 1 by Shiva Technic World ]-->
  <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>

Then click Publish to publish the post.

Style 2

First, go to your Blogger dashboard

Then click on the Theme option

Then click on the drop-down icon near Customize option

Then click on the Edit HTML option

Then find ]]></b:skin> and paste this CSS just above it

/* Dummy Text Style 2  by Shiva Technic World */
  .dummyText i{display:block;background-color:rgba(0,0,0,.05);margin-bottom:10px;height:1.5em; border-radius:30px;}
  .dummyText i.img{height:auto;min-height:200px;margin:2rem 10%}
  .drK .dummyText i{background:#252526;}

If your template supports dark mode then don't forget to change highlighted drK with your template dark mode class.

Then save HTML

Now go to the post or page that you want to add dummy text and switch Compose view to HTML view and paste this HTML code

<!--[ Dummy text style 2 by Shiva Technic World ]-->
  <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>

Then click Publish to publish the post.

Demo

Conclusion

Hope this How to add dummy text in Blogger article will be useful to you, If you have any doubts related to this article ask me in the comment and do share with your friends.

Thanks for visiting, Have a nice day!

Refrence :
Smart Tech Carry

Go to Link

Rate This Article

Thanks for reading: How to add dummy text in Blogger [New Updated] :)

Conclusion

In this article, I have shared How to add dummy text in Blogger [New Updated] . I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!