How to add HTML box in a Blogger post

When CSS or HTML codes are to be added in template of our blog, that is quite easy and convenient. But when such codes are to be added as part of our blog post article, things start becoming little bit harder to adjust. 

But don't worry, I will give a detail steps to add such codes beautifully and in professional way in your blog. But before that we have to add one code in your blogger template.

Login to your blog>Click on Template>Click on Edit HTML>Find (CTRL+F): ]]></b:skin> and Above it add the given code:

/* 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;
}

Once you have added it correctly, click on SAVE TEMPLATE button and then start writing a post article as usual.

When you want to add HTML/CSS code, view your post in HTML version and add the given HTML code wherever you wants it to be displayed:

<div class="code">
YOUR CODES SHOULD BE PASTED HERE
</div>

Once again view your post article in Compose version. See if YOUR CODES SHOULD BE PASTED HERE appears there. Replace it with your code and then click on preview. If things are in manner as you wants, then you may publish your post. Hope you got it right. Cheers!