Code Box for Blogspot

Final result :
this is for example

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 Blogspot. Also this Code Box comes with a hover effect, that is when you hover your mouse over this the color changes.

Here we start:
Login to Blogspot and on your Dashboard choose the blog for which you want to Add The Code Box and then click on Layout (Tata Letak) tab:



Once there, click on Edit Html tab :



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: #998076; border : 0px solid #DADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #251e1b; width : 75%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #e48608;max-height : 500px;min-height : 16px;line-height : 16px;}
.code:hover {background-color : #2c221e;}


Save Your Template. And it is done.

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

<div class="code">
YOUR TEXT OR CODE GOES HERE
</div>
Share this article :
 

+ comments + 2 comments

October 6, 2009 at 3:48 PM

nice info

Anonymous
June 30, 2010 at 10:12 PM

manteppp bro... tak pake di blog ane ..

thanks ^_^

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. erastMedia - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger