Display CSS codes and Scripts in unique Style – Blogger Post Styling hack
01. Aug, 2008 
63 Comments
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> .
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;
}
See Screenshot Below for Instructions :
you can change the text in red to your wish to suit your Template.
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>
Don’t use id instead of class
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.
As for me, everything is fully satisfied.
it doesn’t work .
the letters are also being displyed in th area instead of the code pls fix this bug
Thanx for well written article. But I had trouble navigating through your web site because I kept getting 502 bad gateway error. Just thought to let you know.
Thanks for letting me know Steve… Will fix that soon.
Very usefull post for me. Thanks, i gave it a try right away.
Cool
thanks for interesting post !
Cool
thanks for interesting post !
watch movie online – http://www.watchmovieon.com/ – watch movie online
[url=http://www.watchmovieon.com/]watch movie online[/url]
Hello.
Very interesting thanks !
Suscribe it !
Hi thanks for the post.
It doesn’t work for me techie-solutions.blogspot.com.Cany uo tell why
@varun: Hi, I figured it out…replace double quotation(“) with(‘)
i.e
class=”codeview” to class=’codeview’
maybe my questions its too sikky, how about using different css custom in every post with blogspot platfrom, just like http://jasonsantamaria.com/ thank you
@Varun: Varun you need to parse the html code & paste it.Head over here :http://centricle.com/tools/html-entities/
paste the css code Mohamed has provided & click on encode now copy the generated & code and paste it above ]]> .That should do the trick it works for me check out here:
http://sunil-bhaskar.blogspot.com/2010/07/blogger-subscription-box-widget-with.html
Hi Friend,Nice To Meet You And The Code Is Not Working Correctly.It Is All Fine Till Displaying The Image(Codeview) But The Code Which I Like To Use(Special Characters) Within The Image Has Been Not Showing..I Tried Even Changing The Text Color To Black But No Use..Please Have A Checkout It
Thanks For The Post.If It Works Correctly It Can Be A Great Help to Many Blogger Members Since Many Are lacking On This…Problem.
Please Solve This Problem And Once Again Thanks In Advance