How to Add a Code Box in Blogger

This has been nagging at me for some time... why, oh why, does Blogger not have a code box built into the editing interface???   In the past I've used adjustable text boxes and other weird presentation formats to simulate code boxes but they are lengthy and cumbersome.  Here's how to create an easy-to-use, stylish code box for your blogger articles.

From your Blogger account, click Layout in the top menubar and select Edit HTML on the resulting page. You may want to save a copy of this template if you have previously modified it in any way.  Find the text ]]></b:skin> and add the following code immediately before it

.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;

Make sure you added this code BEFORE the red text above.  Save your template.

Now you're finished!  To create a code box in a Blogger post, just insert your "code" like so:

<div class="code">
INSERT CODE HERE
</div>

Note that the code box shown above is not my design, but was taken from Bariski.