Advanced Customization: Editing Your Blogger Template with HTML and CSS

The new version of Blogger includes many more customization options that anyone can do, no technical expertise required, either by controlling fonts and colors or by adding new content modules to the page. (The HTML/JavaScript module is particularly versatile in this regard.)

However, the ability to customize your Blogger blog doesn't end there. If you know how to code in HTML, you can edit just about any piece of the page's underlying HTML code. HTML editing is a powerful tool that lets you change anything on the pageproviding you know what you're doing, of course.

Caution

If you used HTML and Blogger tags to customize your blog in the old Blogger, you're in for a shock. The new Blogger doesn't use any of the old Blogger tags, which means you need to learn a completely new processand rewrite all your existing code!

Editing Blogger's HTML

If you want to edit the underlying HTML code for your Blogger page, here's how to do it:

Caution

Before you attempt to edit your blog's HTML, you should save a copy of the existing code to your hard drive. (Click the Download Full Template link to do this.) Doing so ensures that you have a full backup copy of your current blog templatewhich you can upload in case you make a mistake when editing the HTML code.

1.	From the Blogger Dashboard, click the Layout link next to your blog name.
2.	When the next page appears, click the Edit HTML link.
3.	This displays the Edit Template page, as shown in Figure 39. The main text box displays the HTML code for your blog. Figure 39. Editing your blog's HTML code.
4.	By default, the code for your page's content modules (what Google calls widget templates) is condensed within the main code. To display the complete code for all these modules, enable the Expand Widget Templates option.
5.	Edit the code within the main text box; preview your edits by clicking the Preview button.
6.	When you finish editing, click the Save Template button.

Understanding Essential HTML Codes

I won't go into all the intricacies of HTML here; I'll assume that if you're editing code, you know what you're doing. What I will do is point out some of the more important codes used to create Blogger pages.

First, know that Blogger uses CSS, so most of the font and color information is set at the very top of the code. Look for the code that starts with the following line:

<style type="text/css"> 

Everything between this tag and the closing </style> tag defines all the elements used in the template's style sheet. When you make changes to the definitions within this section, it affects the look of the entire stylesheet.

The <div> tag denotes the various sections of your blog. For example, you'll find <div> tags for the header (<div id='headerwrapper'>, main content (<div id='main-wrapper'>, and sidebar (<div id='sidebar-wrapper'). Figure 40 shows the start of the sidebar section code.

Figure 40. The HTML code for the start of a blog's sidebar section.

The sidebar is the part of the blog where you'll probably do the most customization. There you can add new content or edit the attributes of the existing content and widgets. You can also edit universal font attributes in the Variable Definitions section at the very top of your template code.

I won't go into a lot more detail about Blogger's HTML code here because it's quite involved. That said, it's not that hard to figure out if you have any knowledge at all of HTML and CSS coding. You can find more information from Blogger online: help.blogger.com/bin/answer.py?answer=46870. If you're comfortable with what you see there, have fun coding!

Note

In the original Blogger, you pretty much had to do HTML coding to effect any serious customization. With the new Blogger, however, you can attain much the same result by using the color and font picker on the Fonts and Colors page and by adding multiple HTML/JavaScript content modules on the Page Elements page. Unless you have very specific needs, I recommend that you skip the HTML coding this time around and take the easy route to customizing your blog template.