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

01. Aug, 2008 59 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 ” .

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.

Mohamed Rias - has written 94 posts on Techie Blogger

I am Mohamed Rias , admin of Techieblogger.com. Basically I am Engineering student but still blogging is my passion. My areas of interest are HTML , CSS , Jquery , Javascript and PHP.

Visit Authors Website  |  All Articles From This Author
0
hits

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

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

  1. AVerniks Reply 16. Oct, 2009 at 12:51 pm

    As for me, everything is fully satisfied.

  2. varun Reply 28. Oct, 2009 at 9:27 am

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

  3. Steve Call Reply 15. Nov, 2009 at 4:09 pm

    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. izdelava spletnih strani Reply 10. Dec, 2009 at 2:37 pm

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

  5. watch movie online Reply 11. Dec, 2009 at 4:21 pm

    Cool
    thanks for interesting post !

  6. watch movie online Reply 12. Dec, 2009 at 5:06 pm

    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. Free Movies Reply 23. Dec, 2009 at 7:32 am

    Hello.
    Very interesting thanks !

    Suscribe it !

  8. varun Reply 26. Dec, 2009 at 7:12 am

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

« Older Comments
Blogger Hack