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 ” .
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.
Thanks a lot Rias,
Your information is useful for me.
Best Regards From Jakarta, Indonesia
Soory Im disturb you,
i had an installed your code in my blog but i confuse how tu use this code <div class="codeview">
Insert the Special code here
</div>
in HTML or Compose mode? thank you
best regards
@ Subagya
It will be better if you put code in HTML view. We can also use compose mode , but I hope you are not getting it properly. I saw your Blog You are getting 2 codeview images. So in HTML view delete one Codeview div. I hope it will work. If you have any problem , Tell me.
regards ,
Blogger Accessories
Thanks alot for the sharing…
But could I use this script with a little modification in the image? Or other words could I use my own image with this script?
best regards,
I Ketut Riasmaja
PS: Our names is the same.. Rias
I just need your permission to use my own image in this script
thanks..
regards,
I Ketut Riasmaja
Hi Ketut Riasmaja ,
Yes you can change the CSS code . change this line
background : #f9f9f9 url(http://i263.photobucket.com/albums/ii150/mohamedrias/cv-1.gif) no-repeat right bottom;
to have your own background image. Or just send me the image you want , I will modify the CSS code , and then I can send you.
email: mohamedrias1103@gmail.com
regards,
Blogger Accessories
Yes of course you can modify the CSS code.
regards,
Blogger accessories
Wow.. thank you very much for your attentions.. Your permission is all I need..
Now I can post this tips in my blog..
Once again thank you very much..
regards,
I Ketut Riasmaja
Hello Muhammed Rias…
Are U Muslim??
Assalamu’alakum…
I’m friend of Subagya and I Ketut Riasmaja…
I saw Ur CSS code are really beautifull…
I think, I’ll learn a lot from U here….
And I also wanna ask d’ permission from you if next time I’ll translate your CSS code to my language..
Best Regard..
Thank U
Walaikum Salam JoVie ,
Yes i am Muslim. Yes you can translate my posts to your Language , but you need to put a link to this post.
Allah Hafiz
assalamualaikum rias,
sorry i have link in another post maybe you dont understand our regional langunage, ok i will you link it that post, sorry for inconvience, i hope i undsertand,
wassalam
I would like to see hehe
~
Thank you for sharing this
Good Morning..
Assalamu’alaikum…
سبØانالله
Thank’s very Much 4 ur permission…
Yes, of course I’m gonna link to this post if I transate it…
best regard
Hey Mohamed, how are you doing. Thanks for this great hack…but am having problems using it. Recently i posted a tutorial which includes a code…then i remembered that you have a hack for showing codes like you do here, so i followed your trick…but with no result, nothing showed up…my post will remain on my site for you to check it. What could’ve i done wrong? or is it because of my website template?
Please i need help.
Hi DanielPK ,
You are not getting this hack working because you are not writing the div section correctly.
In your blog the div section appears like this
<div style="color: rgb(51, 51, 255);">class="codeview">
but it must look like this
<div class="codeview">
your content here
</div>
If you want to apply any color , please apply only in content (wihtout <div class="codeview"> ).
if you still have problem , let me know.
regards,
Blogger Accessories
hi Mohamed…sorry for disturbing but..i want to know…….if am going to use the code…am i supposed to add it in “Compose mode” or “HTML mode”?
because the way i did it was:
1- typing text
2- In compose mode i added the code.
result = nothing working?
then i tried it in HTML mode…and the same result.
by the way! am really confused about how did this
by the way…what really surprised me is seeing that extra code in the template source code, i don’t even know how it got there?
And i’ve already sent you an email with my template attached “Regarding the page navigation hack” can i send you my template code….
and i was wondering if i can have the permission of putting your tutorials on my website while linking back to you. Is it possible?
Thank you
Hi DanielPK ,
yes please send me your old template again , i missed it. regarding this codeview hack I will upload a video tutorial for you.
You can republish this hacks.
regards,
Blogger Accessories
Hi, Mohamed! I’ve tested this hack and works well.so i post in my blog.I’ve changed the text on a image by Portuguese Br Language.But i’nt your permission. No Problem?
Regards,
José Balbino de Araujo
Salam Mohamed, how are you doing, hope your enjoying Ramadhan
Believe it or not, am still stuck with this hack, no matter how many times i try to implement it just doesn't work, well at least for now i got the "code viewer" but with no code inside it. And i think that this hack works on certain templates which is coded in a certain way, at least that's what i think when i took a look at my friend's blog with this hack working fine, just don't know why its not working.
Can you please check again! i really want this hack to work on my template.
i'll email you the template again on from my email which is:
danielpk@technologypublic.com
Subject: Technologypublic's Template & Code view hack.
Thank you very much in advance
Hi mohamed, thank you so much for sharing this, I’ve been looking everywhere and just found your blog.
Very inspirational blog, wish you best luck and happy ramadhan.
voted and stumbled your blog
I’m gonna try it ..thanx..
Hello,
I love your Download post style, can you show me how to make it ?
Thanks.
…
???
Hi X-Fire ,
I am really sorry , I was busy with my exams. I will post about this hack this week for sure.
regards,
Blogger Accessories
hello Mohamed …I visit your blog and read your wonderful article “Display CSS codes and Scripts in unique Style – Blogger Post Styling hack”. I put the codes according your instructions. But, when I am doing any posting there is error message and the “code view” block found empty. There is no codes displaying.
I try for both Edit html and compose mode. But, I am sorry to say that it will not work.
Mohamed can you help me to implement this beautiful code view hack.
Thank.
yeah man you are rocking this is my site
demo test here http://funaxe.blogspot.com
hi rias ,
I checked this on my blog , only codeviewer is comming , without any code inside it.I don’t know why is it , please visit my blog ;-
http://rajeelkp.blogspot.com
and plz mail me how i can do it ;-
rajeelkp@gmail.com
Thanks friend!
I have a Question, How to add emoticons to blogger?
Assalam-u-alaikum,
Sorry, for disturbing you.
I wanted to tell you that the steps you have posted for code view hack i did it proparly.
But it is not working.
Plzzzz send me the details of it to:
sunmoon2050@gmail.com
so good! http://wmv-listen.blogspot.com/
Hi Rias,
Nice trick , earlier i used to use div tags for making code box , but ur css trick is good as well , i m having one problem which i don’t seem to get around
How can i increase the text size in the block as i tried increasing the size in .codeview li section but it didn’t work
Can you please tell me how to increase the text size in the code block
regards
Amit
Thanks man, I have sucessfully added!
Tips Blogger
Nice post but I cannot work it when I am using ‘Div’ tags in between. So I used text area method.
Please see the code at Splitting a side column
the post
Regards
Anish
Thanks Buddy.. It’s a great looking code viewer.
Vikram
nice tut..i’m using it now…thanx man
May Allah bless you bro !
Thanks Mohamed Rias that’s great. If you are putting code in your box, you might also want fixed-space fonts.
To do this just add this line into the codeview style:
font-family: “Monaco”,”Courier New”, “MS Sans Serif”, sans-serif, serif;
(Monaco is only on Mac’s, but looks great for coding! Lucida Console in Windows also looks good). I put mine
background: black;
color: green;
to give it that 3270 dumb terminal look too. Cute!
dear sir
i used in my blog
(if i use any word here it shows but if i use any HTML scripts it it does not display the code it is left blank)
Why do i face such error
Pls help me
Very nice post!!! Thank you for posting, it’s very helpful! =D
What a great piece of code…..very nice and very helpful
salam aliekom
thanks mohamed!
helpful tips .. keep up..!
to DanielPK
salam aliekom
replace
with this
its all about (“) and (â€)
ty
It is rather valuable phrase
Great job admins! I like your theme! Keep up doing good work!
someone?
Thanks a lot mohamedrias, after long searching for solution, NOW I’M GLAD YOU’VE SOLVED MY PUZZLE.
Super post, Need to mark it on Digg
Ugh, I liked! So clear and positively.
Microsoft pushing Bing.com! Any ideas if it is exhaust as they say? or is it wealthy to opus like VISTA?