The Marketing Technology Blog

A friend of mine asked me how I made the code regions on my last blog entry. I actually ‘faked’ the code region utilizing a style. Within Blogger, you can edit your template. I added the following style:

p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px
}

The next step is to edit my tag in the ‘Edit Html’ mode. I simply point to my new style by making the tag. Voila! Breaking down the styles:

• Set the font to Courier New… looks like a generic code editor
• Set the font size to 8pt to look right
• Set the paragraph border style to ‘inset’. This replicates what a textarea looks like on the page.
• Set the border width to 2 or 3 pixels. This makes the inset border style look right.
• Padding sets the distance between the border and the text inside.
• Background color… set it to white (#FFFFFF)
• Line-height - I adjusted this to 100% because some of the other styles in my blogger theme made my line height about 200%
• Set the margin to 10 px. This moves the paragraph (p tag) 10 pixels away from everything.

That’s all there is too it! One note: The editor that comes with Blogger isn’t capable of displaying the as it will appear in your blog. But it works and looks great!

One more note… after you make the edit to the tag, the Blogger editor likes to randomly use it elsewhere across your post. It’s a little bit annoying! My advice would be to write your entire post and then make the one small edit afterwards.

One final note… be sure to use HTML Entities to display your symbols! A couple examples:

• Quotes (”) are “
• < is <
• > is >

Happy Coding!