Hy, Welcome to Gujarat Jobs. you might be want to show a demo or you want to create demo content without texts. In this tutorial, I am going to show you how to add demo texts in Blogger. Demo text will make it easier like you did not want to write an article for the demo. It is suitable for showing demos of your, codes, widgets or any other. It was designed with CSS and HTML codes. So let's check how we can add demo text in Blogger.
How to add demo texts in Blogger
- Go to blogger.com
- Then go to the Theme section
- Then click on the dropdown arrow
- Then click on Edit HTML
- Now find ]]></b:skin>
Then paste this CSS just above ]]></b:skin>
.demo-text{display:block}
.demo-text i{display:block;height:16px;margin-bottom:8px;background:#f2f1f7;border-radius:2px;}
.demo-text i.img{margin:0 auto;max-width:85%;height:180px;border-radius:10px}
.demo-header{position:relative;background:#fff;border-radius:6px;padding:15px 15px;box-shadow:0 2px 4px 0 rgba(0,0,0,.05)}
.demo-header .flex{display:flex;display:-webkit-flex}
.demo-header .flex i{width:60px;margin:0 10px 0 0}
.demo-header .flex i:last-child{margin:0}
Then save the HTML.
Now create a post and change Compose view to an HTML view then paste this HTML code
You May Like Also
<p class="demo-text">
<i style="margin-left: 10%;"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i style="width: 30%;"></i>
</p>
<p class="demo-text">
<i style="margin-left: 10%;"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i style="width: 30%;"></i>
</p>
<p class="demo-text">
<i style="margin-left: 10%;"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i style="width: 30%;"></i>
</p>
For adding more copy this HTML code and paste below that code. you can add this code like how much you want demo text.
<p class="demo-text">
<i style="margin-left: 10%;"></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i style="width: 30%;"></i>
</p>
Then click on Publish to save and publish the post.