Professional Code Box For Bloggers
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
keep up the good work, Bariski !!
Thanks Gagan, glad you like it :)
I’m searching for this things for last few days, Thnku ;)
My pleasure friend. :)
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: ;;)
Thanks mate. I am happy you like this design. See ya around.
P.S. Your check is successful :P
You have two left “{” and 3 right “}” so something is wrong in the above code.
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.
I modified it. I was at work and had to go before i could do it. Thanks for the great CSS!
Hi this is great article.
http://www.topfinest.com
@Andrew thanks for understanding.
http://www.topfinest.com thanks for appreciation.
great work Bariski !
dis is very useful…
can u teach how to place a sharing link menu like the one at the top of this post….plz
@pramod thanks for the appreciation. And the sexy bookmarks can be found here:
Add Sexy Bookmarks to Blogger
Hope this helps.
legal
thanks for the tips
Great Info dude!! Its great to see you who share all the info you know about blogging!!
Thanks for the appreciation buddies, I'm glad you folks like it.