How to Add Code Box Area in Blogger to Show Scripts Separately ?

Code Box - Example Image

Many Times You Seen Many Professional Bloggers who show their Scripts and CSS Code in separate Code Window Because its looking like professional so i bring this Widget for my reader who interesting in to find latest stuffs on blogger and want to become Professional Blogger. So Follow My Simple Steps To Add Separate Code Area in Your Blogger/Blogspot.

• Go To Your Blogger Dashboard > Template.
• Click On Customize > Advanced > Add CSS.
• Copy the Below Code and Paste in Your CSS Section

.code { background:#f5f8fa; background-repeat:no-repeat; border: solid #5C7B90; border-width: 1px 1px 1px 20px; color: #000000; font: 13px 'Courier New', Courier, monospace; line-height: 16px; margin: 10px 0 10px 10px; max-height: 200px; min-height: 16px; overflow: auto; padding: 28px 10px 10px; width: 90%; } .code:hover { background-repeat:no-repeat; }

Yes all Its Done Save Your Template Customization. 

NOTE : When you want to show any code inside this windows so Go to HTML Section Of Post and Add This Code. 

<div class="code">
Code and Scripts Here
</div>

Replace Your Code with "Code and Scripts Here" for show your code in separate coding window. Its Simple To Done and Your Blog Turn Into Pro Look Blog.