In this tutorial, I will show you how to add a html code in a separate box in your blog post. Mostly, this type of box is required for a technology blog. When you have to ad a HTML code in your blog and if you are just putting it as a normnal text, then it looks bad. Adding this type of box will increase the visibility and beauty of your blog.
Follow these simple steps to apply it on your blog. Look for the code written below for demo.
Follow these simple steps to apply it on your blog. Look for the code written below for demo.
Add a HTML code box in Blogger Post
Step 1 : Open your blogger dashboard. Now go to 'Template' and then click on 'Edit HTML'.
Step 2 : Click anywhere inside the code, then using the keys Control+F, open the search box.Write the code given below in that box and hit enter to find it.
]]></b:skin>
Step 3 : Now and copy and paste the following code given below inside the box.
/* Code Box
----------------------------------------------- */
.code {
background:#f5f8fa;
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 10px 10px 10px; width: 90%;
}
.code:hover {
background: #FAFAFA;
background-repeat:no-repeat;
}
Step 4 : Save the template and you are done.
Now as you can see the code box in above code. To similarly to this, while you are writing the post, go to html form and then paste your code as
<div class="code">
Write your html code here
</div>
I hope this tutorial helped you to add html code box in your blog post. Please leave a comment if you liked it.
Now as you can see the code box in above code. To similarly to this, while you are writing the post, go to html form and then paste your code as
<div class="code">
Write your html code here
</div>
I hope this tutorial helped you to add html code box in your blog post. Please leave a comment if you liked it.
