How to Add Dummy Text in Blogger

Hi to all, in this article I am going to tell you all about how to add dummy text in blogger website easily in just few minutes by using HTML and CSS.

Basically we don't recommend it to use this dummy text 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 read the article till end to get clear understanding about adding dummy text in blogger website without any issue or error.

Steps to Add Dummy Text in Blogger Website

Login to Blogger Dashboard

First of all, you have to visit official blogger website.

Now you need to login to your blogger website dashboard by using your login credentials.

Backup Blogger Theme Code

After sign-in to blogger dashboard, we recommend you to take a backup of your template by chance if any mistake happens in HTML you can restore it later.

If you wan to backup your blogger theme code then you can follow below path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select backup -> Click on download -> Verify Captcha -> Save the downloaded file in a safe place for future use.

Open Blogger Theme Editor

After backup of your theme, now you need to open blogger theme editor to add few codes and if you want to open blogger theme editor then you can follow below provided path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Select Edit HTML -> Blogger theme editor section.

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

Style-1

• Visit blogger theme editor.
• Press CTRL+F and Find ]]></b:skin> and paste the below CSS code just above it.

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

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

Style-2

• Go to blogger website theme editor.
• Press CTYRL+F and Find ]]></b:skin> and paste the below CSS code just above it.

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

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

Note

If you get any error or issue while saving the code then you can restore the backup code again and need tor repeat the same process as mentioned in the above steps carefully.

If you want to change the color and style of the text then you need to modify above provided CSS code.

And to change the colors you need to replace color codes and for color codes you can use google color picker or any other third part color picker website.

Conclusion

I hope that you have understood about adding dummy text in blogger website easily in just few minutes by using HTML and CSS.

If you have any doubts regarding the article, then you can contact us through contact us page or from social media platforms.