How To Add Awesome Codes Blocks In Blogspot Posts?

You have noticed in most of the blogs having a separate background for html codes in blogs.But the small bloggers dont know this so i’m gonna say you how to do that one. It’s simple and stylish and will make your blog awesome, While creating any Post, If you want to show the special Code in post that CSS code or JavaScript code, what ever may be , Go to Edit HTML tab in Post and create Div section and put your code in Div section like bellow and publish Your Post

Features:

1.) Pure HTML CSS code.
2.) No external file embedded.
3.) Awesome and Stylish code box.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire “Blog”.
3.) Go To “Template”.
4.) Click “Edit HTML”.
5.) Now “Click” Within Code Box.
6.) Press [CTRL+F] To Search Code.
7.) Now “Copy” The Below Code And “Paste” It Before Code..
8.) Click “Save Template” And Done.

<style>
.codeview {
margin : 15px 15px 15px 35px;
padding : 10px;
clear : both;
font-size:normal;
list-style-type : none;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
background: url('https://3.bp.blogspot.com/_nDNgmK8FIyI/TEKte0tjVOI/AAAAAAAAAN4/UekZZxFJvlk/w2b_codeicon.gif') no-repeat scroll bottom right #EFFBF5;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
</style>

9.) Create A “New Post” Or “Edit” Some One Existing.
10.) Click “Edit HTML” Tab In The Post Editor.
11.) Now “Copy” The Below Code And “Paste” It There
12.) Click “Publish” Or “Update” To Done.

<div class="codeview">
<!-- Put Your Special Encoded Code Here -->
</div>

Customization:

1.) Just add the STYLE code one time in template.
2.) Then add the second code snippet in every post of your Blogger where you want to add code.
3.) In the code box that you will add in HTML mode of posts, you have to add your encoded codes.

Last Words:

This is what we have. We have many more like this so If you liked it then share it with your friends and leave your comment and if you still have any quires then feel free to ask us. Thanks to be with us, will be with you on next codes. Be with us.