Add styles permanently to your Blogger layout

So if you're like me, you probably write posts. These posts contain paragraphs, images, maybe dot-points, and yes, code. What many bloggers do with posted code, is give it a certain style for easier readability.

$ something like this

Up until now, everytime I wanted to do that, I first stated the style that I wanted in the HTML editing way. This was done by putting this at the start of every post that I needed to:

<style type="text/css">
pre.source-code {
  font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
  color: #000000;
  background-color: #eee;
  font-size: 12px;
  border: 1px dashed #999999;
  line-height: 16px;
  padding: 10px;
  overflow: auto;
  width: 100%
}
</style> 

But now, this part can be skipped and all I have to do now is just wrap the text in the appropriate tags and Blogger will do the rest. But first, the styling above needs to be added to your Blogger settings.

While logged into your Blogger account, navigate to the page that shows you all the info for the blog that you want to customize, in my case "My Natural State...".

With the 'Layout' option on the left selected, click on the 'Template Designer' text just under the blog title.

You should be taken to the template wizard that you would of gone through the first time you made the blog. Select "Advanced" -> then scroll down to "Add CSS" -> and then add you style!

That's all there is to it. Now when you make a new post, you still have to type the with the HTML tab selected up the top, otherwise it will be read as plain text. Oh...and this just means that you only have to remember the tags, luckily I only have 1, heheh.

Enjoy, ciao!