Aug 1, 2008 in

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.

Check Out This Popular Posts

42 Responses So far
gravatar
subagya
on August 8, 2008 at 3:31 PM  

Thanks a lot Rias,
Your information is useful for me.
Best Regards From Jakarta, Indonesia

gravatar
subagya
on August 8, 2008 at 6:55 PM  

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

gravatar
Mohamed Rias
on August 9, 2008 at 12:24 AM  

@ 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

gravatar
I Ketut Riasmaja
on August 14, 2008 at 11:23 PM  

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

gravatar
I Ketut Riasmaja
on August 14, 2008 at 11:28 PM  

I just need your permission to use my own image in this script

thanks..

regards,
I Ketut Riasmaja

gravatar
Mohamed Rias
on August 14, 2008 at 11:29 PM  

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

gravatar
Mohamed Rias
on August 14, 2008 at 11:34 PM  

Yes of course you can modify the CSS code.

regards,
Blogger accessories

gravatar
I Ketut Riasmaja
on August 15, 2008 at 2:24 AM  

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

gravatar
JoVie
on August 15, 2008 at 7:12 AM  

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

gravatar
Mohamed Rias
on August 15, 2008 at 8:33 AM  

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

gravatar
subagya
on August 16, 2008 at 9:12 AM  

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

gravatar
closer to;
on August 17, 2008 at 5:52 AM  

I would like to see hehe
Thank you for sharing this :)~

gravatar
JoVie
on August 20, 2008 at 5:56 PM  

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

gravatar
DanielPK
on August 23, 2008 at 2:52 AM  

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.

gravatar
rias-techno-wizard
on August 23, 2008 at 5:54 AM  

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"&gt;

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

gravatar
DanielPK
on August 23, 2008 at 7:49 AM  

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

gravatar
Mohamed Rias
on August 23, 2008 at 7:57 PM  

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

gravatar
katatempla
on August 26, 2008 at 11:14 AM  

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

gravatar
DanielPK
on September 7, 2008 at 12:49 PM  

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 :)

gravatar
networking
on September 7, 2008 at 8:46 PM  

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

gravatar
Preetish
on September 19, 2008 at 1:10 PM  

I'm gonna try it ..thanx..

gravatar
X-Fire
on September 21, 2008 at 9:55 AM  

Hello,
I love your Download post style, can you show me how to make it ?
Thanks.

gravatar
X-Fire
on September 24, 2008 at 5:25 AM  

...

gravatar
X-Fire
on September 30, 2008 at 7:44 AM  

???

gravatar
Sheik
on September 30, 2008 at 9:25 AM  

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

gravatar
srikanta
on October 1, 2008 at 11:55 AM  

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.

gravatar
fungags
on October 14, 2008 at 4:59 PM  

yeah man you are rocking this is my site

demo test here http://funaxe.blogspot.com

gravatar
Rajeelkp
on October 22, 2008 at 12:33 AM  

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

gravatar
Shafar
on November 17, 2008 at 6:31 AM  

Thanks friend! :)

I have a Question, How to add emoticons to blogger?

gravatar
zaid
on November 28, 2008 at 11:33 AM  

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

gravatar
the best girl
on December 22, 2008 at 4:10 AM  

so good! http://wmv-listen.blogspot.com/

gravatar
Lee Lang
on December 28, 2008 at 7:06 PM  
This comment has been removed by the author.
gravatar
amiT
on January 15, 2009 at 6:55 AM  

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

gravatar
Shafar
on January 21, 2009 at 8:45 AM  

Thanks man, I have sucessfully added!
Tips Blogger

gravatar
Anish
on February 4, 2009 at 9:14 PM  

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

gravatar
Vikram
on February 7, 2009 at 10:53 PM  

Thanks Buddy.. It's a great looking code viewer.

Vikram

gravatar
fyzue
on February 14, 2009 at 7:52 PM  

nice tut..i'm using it now...thanx man

gravatar
الـطـالـب
on April 23, 2009 at 1:11 PM  

May Allah bless you bro !

gravatar
jusblad
on April 26, 2009 at 9:33 AM  

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!

gravatar
Bewyn
on May 2, 2009 at 6:34 AM  

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

gravatar
eizu
on May 18, 2009 at 5:19 AM  

Very nice post!!! Thank you for posting, it's very helpful! =D

gravatar
Aravind D Reddy
on May 23, 2009 at 5:52 AM  

What a great piece of code.....very nice and very helpful

Post a Comment

Custom Search
Web Analytics