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