How to have a separate background for HTML codes in posts

Posted by Anonymous on 12/20/2011

This post will say you how to have separate background for html codes in blogger posts.First of all i should thank http://www.way2blogging.org for posting saying me this information.And this was the thing i was looking for.
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.

Blogger dashboard
Design -->Edit html
Check expand widgets box
Search for ]]></b:skin>

When you find this paste the below code above this

.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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlFct_ynTOkre2VAZI6pjHHPWvJvpqWuxTj5zGugmYlcFIDeyR9cNKMuVJ8Bmk89s-1JfR-SD1xRiIRM57pzaRtGva7ZrdMyED4gkg8BDTVHwd1VP7622zDWZ6eBCM6L-dNzPXr6u_7erq/') 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;
}
]]>

Now save your template.

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