How to Publish Code in a Stylish Box on Blogger



1. Sign in to your Blogger Dashboard --> Design --> Edit HTML.




(You might want to backup your template before proceeding.)


2. Look for (CTRL+F):
]]>


3. Add the following code right ABOVE ]]>

.code { background:#f5f8fa; background-image:none; 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: #FAFAFA; background-image:none; background-repeat:no-repeat; }

Go to your Dashboard and create a new post on the blog where you added the Professional Code Box.
Just paste the following code in the Edit HTML tab:


<div class="code">

YOUR CODE
</div>