Follow us to get updates regarding Latest posts Follow Now!

How to add Dummy Text in Blogger?

In this I made a tutorial on How to add Dummy Text with CSS in Blogger? which may be used to display a sample of fonts, generate text for testing.

In this I made a tutorial on How to add Dummy Text with CSS in Blogger? which may be used to display a sample of fonts, generate text for testing.

how-to-add-dummy-text-with-css-in-blogger

Hello Everyone! Welcome back to Techy DarshaN, Toady our tutorial is How to add Dummy Text with CSS in Blogger. 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 post we will learn How to add Dummy Text with CSS in Blogger. so read the full post and say your opinion in comments section.

Let's Begin

Demo

How to add Dummy Text with CSS in Blogger?

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

Style 1 :

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

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 */
  .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 article I made a tutorial on How to add Dummy Text with CSS in Blogger? which may be used to display a sample of fonts, generate text for testing. I hope you have liked and please do share with your friends and follow up our blog for more.

If you face any problems in code or have any questions please feel free to ask 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. © Techy DarshaN | All Rights Reserved 

 © Copyright https://www.techydarshan.eu.org

Getting Info...

About the Author

Student | Developer | Blogger

Post a Comment

Techy DarshaN's Rules : Leave your opinion or any doubt about this article And is you have any queries please feel free to ask. Don't try to spam, our team reviews every comment.
Have a Cookie!
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
More Details
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.