Add a Box For Showing HTML Codes in Blog Post

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.

Add a Box For Showing HTML Codes in Blog Post

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’.
Add a Box For Showing HTML Codes in Blog Post
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> 
Add a Box For Showing HTML Codes in Blog Post
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.

Add a Comment

Your email address will not be published. Required fields are marked *