Beautiful display box for adding HTML and JavaScript Codes inside blogger posts

How to add HTML and JavaScripts to your blogger posts

We quite often require to add the HTML and Javascript codes to the blogger posts.These codes are useful to make your blog more functionable.Now in order to make them distinguishable from the normal posts,we usually highlight them with the different background,so that users find it easy and friendly to use the code in their blogs.Here I present the code that you can add in your blog if you want to add the codes in your blog posts.

* First of all backup your template

* Go to Design>>Edit HTML>>Download Full Template

* Search for  ]]></b:skin>

* Just above that code place the following code

pre
{
background:#efefef;
border:1px solid #A6B0BF;
font-size:120%;
line-height:100%;
overflow:auto;
padding:10px;
color:#000000 }
pre:hover {
border:1px solid #efefef;
}
code {
font-size:120%;
text-align:left;
margin:0;padding:0;
color: #000000;}
.clear { clear:both;
overflow:hidden;

}

* Save the template and you are done

How to Use the Display Box

You can add the display box anytime to your blog posts simply by adding

<pre>

"your HTML or JAVA script"

</pre>

Secondly,in order to make the HTML and JavaScript code user friendly,replace all "<" with &lt; and all ">" with &gt;

And You are done..!!

Further Customization

* If you want to change the background color of the display box,then change "#efefef" to whatever color you want.

* If you want to change the border from "solid",you can make it either "dotted" or "dashed".

* If you want to change the border color then simply replace "A6B0B5" to whatever color you like.


Liked my article?Please Join my Blog Here to stay updated with lots more. 


Having any query,feel free to ask me..!!