Add HTML and Java Scripts in a Display Box inside Blogger Posts

You might have also seen people showing the scripts in small display boxes of fixed length and width. Now after applying this Blogger trick, you would be able to show HTML and JavaScript inside Blogger posts with custom display boxes. If you have got to add plenty of codes and HTML, Java scripts inside your Blog posts then its the best tool for you. Follow these steps to add a display box to blogger posts:

How to add HTML and java Scripts inside Blogger Posts:

• First of Backup your template.
• Go to Design >> Edit HTML >> Download full Template.
• Search for ]]></b:skin>
• Just above that code place the following code:

1. 
   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 simple by adding:
Go to Edit HTML Tab of Blog Post and do this:

1. 
   <pre>
   
   "your HTML or JAVA script"
   
   </pre>
   
   

Secondly the code with you would place between the tags above must be friendly. In order to do that, replace all "<" with &lt; and all ">" with &gt;.
Thats all!

 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 simple replace "#A6B0BF" to whatever color you like.

We want to launch a tool to do this easily and in different patterns and colours.

Keep visiting.

Peace and Happy Blogging.