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 ” .

 Blogger Post Styling Hack


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

See Screenshot Below for Instructions :

Blogger Post Styling Hack

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 celebrate .

 Blogger Post Styling Hack

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.




If you like this article , then please help us by bookmarking

63 Responses to “Display CSS codes and Scripts in unique Style – Blogger Post Styling hack”

  1. As for me, everything is fully satisfied.

  2. it doesn’t work .
    the letters are also being displyed in th area instead of the code pls fix this bug

  3. 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.

  4. Very usefull post for me. Thanks, i gave it a try right away.

  5. Cool
    thanks for interesting post !

  6. Cool
    thanks for interesting post !
    watch movie online – http://www.watchmovieon.com/ – watch movie online
    [url=http://www.watchmovieon.com/]watch movie online[/url]

  7. Hello.
    Very interesting thanks !

    Suscribe it !

  8. Hi thanks for the post.
    It doesn’t work for me techie-solutions.blogspot.com.Cany uo tell why

  9. 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

  10. @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

  11. 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

Leave a Reply

You must be logged in to post a comment.