Professional Code Box For Bloggers

by Bhanu Ahluwalia 18 Comments

Hello.

I got few mails from my readers asking me to share How did I designed this blog and share the tips. So I will start with the Professional Looking Code Box. This tutorial assumes that you have at least little bit knowledge of working around with templates.

This Professional looking Code Box can also be used with WordPress, but here I am taking the example of Blogger.

Also this Code Box comes with a hover effect, that is when you hover your mouse over this the color changes.

Here we start:
01. Login to Blogger and on your Dashboard choose the blog for which you want to Add The Code Box and then click on Layout tab:

Once there, click on Edit Html tab:

02. Now in Edit Html tab, before proceeding next, it would be a better idea to backup your template, by clicking on Download Full Template link:

Now just before the ]]></b:skin> add this Code:

.code {color: #006AB0; border : 1px solid #DADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #fAfAfA; width : 90%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #DADADA;max-height : 500px;min-height : 16px;line-height : 16px;}
.code:hover {background-color : #f3f3f3;}

Save Your Template. And it is done.

03. Now whenever you want to put any code in your template just use the div class code as shown below:

If you find any problem, please feel free to reply here and I will gladly help you with the best possible way.

If You Like This You May Also Like To Read
How To Add A Contact Form To Your Blog
Hide Navigation Bar
Add Yahoo Smileys In Comments
Add A Comment Form Below Posts

About the Author

When I was born I was so shocked I didn't speak for a year and half...... My brain has 2 parts, Right and Left, The Right one has nothing left in it and the Left one has nothing right in it...... Who says Nothing is Impossible?? I've been doing nothing for years......

Gagan says:

April 5, 2009 at 9:02 am

keep up the good work, Bariski !!

Bariski says:

April 5, 2009 at 9:18 am

Thanks Gagan, glad you like it :)

Rapideo says:

April 5, 2009 at 11:17 am

I’m searching for this things for last few days, Thnku ;)

April 5, 2009 at 11:30 am

My pleasure friend. :)

Ahmad says:

April 5, 2009 at 5:29 pm

Nice work done here on your blog very nice. Will visit often, between this is a superb design simple and effective.

Good going keep up the spirit boy.

Check: ;;)

April 5, 2009 at 5:57 pm

Thanks mate. I am happy you like this design. See ya around.

P.S. Your check is successful :P

Andrew says:

April 6, 2009 at 3:05 pm

You have two left “{” and 3 right “}” so something is wrong in the above code.

April 6, 2009 at 4:24 pm

Oh! Andrew thanks for pointing out. I have edited the code, it was working fine but there was a bit extra useless code, which is removed now. Thanks.

P.S.; You have ripped my codebox on your blog, that is not appreciated, please remove it or else I have to file a complain against you to google adsense as this template is protected by copyright laws. Hope you understand.

April 6, 2009 at 6:43 pm

I modified it. I was at work and had to go before i could do it. Thanks for the great CSS!

www.topfinest.com says:

April 7, 2009 at 12:20 am

Hi this is great article.

http://www.topfinest.com

April 7, 2009 at 3:31 am

@Andrew thanks for understanding.
http://www.topfinest.com thanks for appreciation.

pramod says:

June 3, 2009 at 9:35 pm

great work Bariski !
dis is very useful…

June 3, 2009 at 9:38 pm