Blogger Template Tutorial

Blogger has introduced a new collection of easy-to-customize templates (more info). Earlier themes are not available in the new collection, but you can still edit them. This tutorial is for the earlier themes.

Notice: Google's Dynamic Views, introduced in 2011, will override customized Blogger templates unless users set their Blog Feed to 'None' or 'Short'. Dynamic Views depend entirely on JavaScript.

Arrange Page Elements

When you click the "Design" tab in the Blogger dashboard the Page Elements panel is displayed first of all. It shows a layout diagram occupying the full width of the screen. You can rearrange the positions of widgets by dragging and dropping.

You can also customize templates by changing the colors and fonts using the Template Designer "Advanced" option. There are groups of pre-defined colors which you can pick, or you can enter hex codes in the "color" box — but remember to press "Enter" on your keyboard to activate them.

Edit HTML

The "Edit HTML" option allows you to modify the template. The first thing to do is download a copy of the template to your hard drive. Then, if you make a mistake editing your template, or don't like the result, you can revert to the original by uploading the same file again. There's a "Download Full Template" link on the page. Visit the relevant Blogger help page — Learn more — to find out how to make changes. There are basic Page Element Tags and advanced Widget Template Tags. Before you can use the advanced tags you need to select the "Expand Widget Templates" checkbox.

If you're familiar with Cascading Style Sheets, another way to modify the appearance of the theme is to add, or modify, CSS rules in the <style> section of the template.