How to Show Colored Background For HTML and JAVA Scripts In Post of Blogger Blogs.

To give a professional look to your blog you can show a colored Background to HTML and JAVA Scripts Shown in Post area in Blogger Blogs.So That reader can easily differentiate between code and simple text.so here is a simple code to do this.



Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F

Search For below code:-

]]></b:skin>

And place Below CCS code above previous 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;
}

(If you want to show image in background just replace background:#efefef; above with background: Url(http://YOUR_IMAGE_URL);)


it will loo like this






The above code is for drawing a display box inside the Blogger post to show HTML and JavaScript.You can change the length ,width ,size and color of the box , back ground image etc. by editing the CSS 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>

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 <pre> & </pre> to keep it inside display box

Making the script post able is the only requirement if you plan to show the HTML or Java Script alone , without a display box.