Professional Code Box For Bloggers

code boxHello.

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

Once there, click on Edit Html tab:
edit html

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:
hide navigation bar

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

.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;}

code box
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:

<div class="code">
YOUR TEXT OR CODE GOES HERE
</div>

code box

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

18 Comments

  1. Gagan April 5, 2009
  2. Bariski April 5, 2009
  3. Rapideo April 5, 2009
  4. Bariski April 5, 2009
  5. Ahmad April 5, 2009
  6. Bariski April 5, 2009
  7. Andrew April 6, 2009
  8. Bariski April 6, 2009
  9. Andrew April 6, 2009
  10. www.topfinest.com April 7, 2009
  11. Bariski April 7, 2009
  12. pramod June 3, 2009
  13. pramod June 3, 2009
  14. Bariski June 14, 2009
  15. EXPERT June 24, 2009
  16. anas_AF July 6, 2009
  17. Pro July 13, 2009
  18. Bariski July 13, 2009

Leave a Reply

Your email address will not be published. Required fields are marked *