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: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:
YOUR TEXT OR CODE GOES HERE
</div>
If you find any problem, please feel free to reply here and I will gladly help you with the best possible way.
How To Add A Contact Form To Your Blog
Hide Navigation Bar
Add Yahoo Smileys In Comments
Add A Comment Form Below Posts
18 Responses to Professional Code Box For Bloggers
Gagan April 5, 2009
keep up the good work, Bariski !!
Bariski April 5, 2009
Thanks Gagan, glad you like it :)
Rapideo April 5, 2009
I’m searching for this things for last few days, Thnku ;)
Bariski April 5, 2009
My pleasure friend. :)
Ahmad April 5, 2009
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: ;;)
Bariski April 5, 2009
Thanks mate. I am happy you like this design. See ya around.
P.S. Your check is successful :P
Andrew April 6, 2009
You have two left “{” and 3 right “}” so something is wrong in the above code.
Bariski April 6, 2009
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.
Andrew April 6, 2009
I modified it. I was at work and had to go before i could do it. Thanks for the great CSS!
www.topfinest.com April 7, 2009
Hi this is great article.
http://www.topfinest.com
Bariski April 7, 2009
@Andrew thanks for understanding.
http://www.topfinest.com thanks for appreciation.
pramod June 3, 2009
great work Bariski !
dis is very useful…
pramod June 3, 2009
can u teach how to place a sharing link menu like the one at the top of this post….plz
Bariski June 14, 2009
@pramod thanks for the appreciation. And the sexy bookmarks can be found here:
Add Sexy Bookmarks to Blogger
Hope this helps.
EXPERT June 24, 2009
legal
anas_AF July 6, 2009
thanks for the tips
Pro July 13, 2009
Great Info dude!! Its great to see you who share all the info you know about blogging!!
Bariski July 13, 2009
Thanks for the appreciation buddies, I'm glad you folks like it.