HTML and JavaScript inside box - blogger

It is very difficult for anyone using Blogger blogs to show HTML codes and JavaScript inside the blog posts . and many site they would have display it in side box. i have already said about using the POSTABLE method by which we can directly post the codes by converting that code as normal view by postable. This is another step in it.
1.Login to Blogger Dashboard and navigate to Layout > Edit Html

2.Don’t click the checkbox which says ‘Expand Widget Templates’

3.Now find

]]>

paste this code above that identified code in 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;
}

After adding this code you can call the display box anytime into your post by following next step.

In Blogger in draft , there would be a problem with this HTML and JavaScript display box . For fixing that,
Expand Post options from the Blogger text editor ( On the bottom left corner ) . From the compose settings, select Interpret typed HTML . Now everything would appear fine .


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

& 

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 display box.