Its very common to sees the scripts in small display
boxes of fixed length and width on every website. After applying this trickon your Blog,
you might 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.
:: Prerequisite before Applying the Code ::
- 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
:: The 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!
:: Now getting on the part by which you can add Display Boxes inside the Post ::
You can add the display box anytime to your blog posts simple by adding
<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 < and all ">" with >.
Thats all!
:: Things in the code which you can change ::
Yes, turn on the Geek in you and customise colors , display properties etc. by simply Googling Hexadecimal codes of colors [ Don't Worry i'll cover these in forthcoming posts :) ]
- 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.