Add HTML Codes in Blogger Post

Do you want to write some Html codes in your blog post? If so, first you would have to make a few simple changes to your blogger template so that it is able to resist any codes in the post. If you do not make the changes in the template, the Html code in your blog post will merge with the codes in the basic blogger template and you would not be able to view any codes in your post.

Hence, to make some changes in your blogger template , you would have to add a few CSS codes to your template.

Step1 :

Go to Dashboard> Layout >Edit Html.

Step 2:
Click on "Edit HTML " Tab and it will open up a new window .
Step 3:

Now Search for this Code: ]]></b:skin>
(Check out here to locate a code easily in the Template)

Add the following Code just above the ]]></b:skin> code.

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;
}

Step 5:

Save Your Template.

Done! Now, your blog is ready to show HTML codes in every blog post. Awesome, isn’t it? Also,it is so very easy.

There is still one more step you would have to follow, to show Html codes in blog post.
While writing your post , go to Edit Html section of your post and add <pre>before and </pre>after the codes.

Like this: <pre>Your Codes Here</pre>

That’s it! Your Html codes will show in your Blog post! :)