Display CSS codes and Scripts in unique Style - Blogger Post Styling hack

All of you might have noticed that in my blogger posts I use a custom CSS style to show CSS codes , Scripts and other important notes. After looking at this cool features one of my reader asked me how to do this. So I am Posting this " Post Styling Hack for blogger to display scripts and CSS codes in unique style " .

Just Follow This steps to add this " Post Styling Hack " to your Blog .

Step 1 :

Login to your Blogger account and navigate to Layout section . Then go to Edit Html subtab .

No Need to Check Expand Widgets Box

Step 2 : Add This CSS code above this line

]]></b:skin>





.codeview {

margin : 15px 35px 15px 15px;

padding : 10px;

clear : both;

list-style-type : none;

background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;

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;

font-family : "Courier New", "MS Sans Serif", sans-serif, serif;

color : #333333;

font-weight : normal;

margin : 0;

padding : 0;

}




Step 3 :

Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this div section .


<div class="codeview">


Insert the Special code here




</div>


that's it you have add this post Styling hack to your blogger template .

See you soon with a new hack . please tell your suggestions to this post. It will help me to improve the standard of this hack.