HTML and JavaScript inside blogger posts using custom display boxes

It is very difficult for anyone using blogger blogs to show HTML codes and JavaScript inside the blog posts . You might have seen people showing the scripts in small display boxes of fixed length and width. Now after applying this blogger trick you will be able to show HTML and JavaScript inside blogger posts with custom display boxes .

Click on layout of the blog in which want show HTML or JAVA script and now select edit HTML
Before you apply any blogger trick ,remember to download and save your full template.
Now tick the expand widget templates and move onto the selection shown below

Otherwise you can press Cntrl+F and paste ]]> on appearing search box then enter
Paste the following code above the text appearing green and save the template

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

The above code is for drawing a display box inside the blogger post to show HTML and java scripts.You can change the length ,width ,size and color of the box by editing the code .After adding this code you can call the display box anytime into your post by following next step.


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

Before you add "your HTML or JAVA script " make it post friendly by following this link
Inside the box provided paste the script and click make it friendly
Now copy the generated code and paste between < pre > & < / pre > to keep it inside display box

Making the script postable is the only requirement if you plan to show the HTML or JAVA script alone without a box.