Blogspot - Putting Code Box in Blogspot

Ever wondered how to add code boxes on your blogger post? There are two ways, one is a simple method which is best suited for beginners(like me) and the other is the advanced method which gives your code box a more professional look but requires a little source tweaking.

So here's the simple method, just paste this code on your post editor in Edit HTML tab.
<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">
YOUR CODE 
</textarea>

Here's an image on where to post the code:

And here is the result:


It's just the simple version, but if you want it Professional Code Box look, follow thissecond method.

1. Follow this guide on How To Edit Your Blog Template

2. Find(CTRL+F) ]]></b:skin>

3. Add this code ABOVE ]]></b:skin>

.code {
  background:#f5f8fa;
  background-image:url(http://i142.photobucket.com/albums/r99/nilarimogard/30bmq7a.gif);
  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:url(http://i142.photobucket.com/albums/r99/nilarimogard/o7t4j9.gif);
  background-repeat:no-repeat;
}

4. Click Save Template

5. Now go to your Dashboard and make a new post on the blog where you added theProfessional Code Box.

On Edit HTML tab, just paste this code:
<div class="code">
 YOUR CODE 
</div>
(refer to the image above for reference)

Here is the result:

THIS IS THE
RESULT
CALLED
PROFESSIONAL CODE BOX

Note: You cannot see the Professional Code Box on your post editor, so you'll have to save it and view the post from your blog.