How to add Professional Code box

Before doing any modifications to your blog please back up your present template
Log in to your blogger account-aClick on "lay out" of the blog you want to do modifications-Edit HTML-Ctrl+A-Ctrl+C-Ctrl+V to notepad.
Now you can start your work.
Uses:-
you no need to define table every time, when you want to display some code in your text. It automatically takes the width and length required to display your "Text/Code" .

Draw Back
If your code is very lengthy then it will create along table/form that is non scrollable taking a large space in your posts.

Click "Ctrl+F" search for ]]></b:skin>
Immediately before this line add the following code

code {color: #006AB0; border : 1px solid #DADADA;padding : 5px 5px;font-family : Consolas, "Courier New", Courier, mono, serif;font-size : 12px;background-color : #fAfAfA; width : 90%;overflow : auto;margin : 10px 0 10px 10px; border-left : 20px solid #DADADA;max-height : 500px;min-height : 16px;line-height : 16px;}
.code:hover {background-color : #f3f3f3;}
Save the template.
Now the main work of template optimization finished.

Using this feature.
From now on words when you want to display any code /text in your posts with in the box
<div class="code">
enter your text or code here.This will be represented in Automated box after you publish your post
</div>

Demo

Here i am putting code
<script src='http://naeemnur.googlepages.com/smilhack.js' type='text/javascript'/><noscript><a href="http://www.tutzone.org" target="_blank">TutZone</a></noscript>

source:http://www.bukisa.com/articles/133722_professional-code-box-for-bloggers