Join our Telegram group ! Join now!

[Updated 2022] How to add dummy text in Blogger

Introduction

 Hello Blogger, in this tutorial I will share with you all how to add dummy text to a blogger blog. If you provide any kind of code like HTML, CSS or any other then you may need to add dummy text. Because its help the user. 

If you want to add dummy text to your Blogger post then just follow the below steps.

How to Add dummy text in Blogger?

  • Log in to your Blogger dashboard and select which blog you want to add a code box.
  •  Next is Go To "Theme" > and click on  "Edit HTML".
  • search  ]]</b:skin> code in blogger template code 
  • For search code: click anywhere inside the HTML code area and press the "Ctrl + F" key
  •  copy below CSS code and just paste just above  ]]</b:skin> code

Note: I give you 2 styles of code boxes. choose your favourite one and copy its CSS code.

Style: 1

View demo

For style 1 copy this code and paste it above the ]]</b:skin> 

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

Now save your theme.

Next, create a new post or edit an existing post to add this dummy text.

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

Now copy the below code and paste it where you won't show up dummy text. 

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

 Style :2 

View demo

 For the below style copy this code and paste it above the ]]</b:skin> 

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

If you choose style 2 then paste the below code in 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>

<p class="dummyText">

  <i style="margin-left: 10%;"></i>

  <i></i>

  <i></i>

  <i></i>

  <i></i>

  <i style="width: 30%;"></i>

</p>

It's done ✅ now Save or update your post.

Conclusion

Hope this article will be useful to you, Do share it with your friends, If you have any doubts related to this article ask me in the comment.

Thanks for visiting!

Rate this article

Hi i am Sohil, i am a Student and doing blogging when i get time, i am providing tech,news and tutorials like post.

1 comment

  1. Amazing ❤️