Blogger Layout Tutorial

When you create a new blog at blogspot.com you are presented with an initial selection of 16 theme templates. There are more if you click on "Choose New Template" in the Template section of the dashboard. At the time of writing, there were 38 variants altogether. Some of them allow you to choose fixed width or fluid width (stretch), some have the sidebar on the left, and most themes have two or more color schemes.

If none of the standard selection match your preferences, the Blogger dashboard offers customization options. These are described in a collection of pages at Blogger Help (help.blogger.com). The purpose of this article is to provide a brief guide all in one place.

Jump to section: Fonts and Colors | Template - Edit HTML.

How to Add and Arrange Page Elements

When you click the Template tab in the Blogger dashboard the Page Elements panel is displayed first of all. You can switch to Fonts & Colors, Edit HTML (i.e. the template), or Choose a New Template.

The Page Elements panel shows an interactive layout diagram occupying the full width of the screen. The example screenshot below has been cropped to fit this column.

Step 1 - Choose a page element:

When you click on "Add a Page Element" a popup window appears with a menu of add-on features (widgets). You can place them in the sidebar or in the footer. From time to time new widgets are added to the menu by the Blogger software team.

Step 2 - Configure the widget:

Each widget has a configuration panel which appears in the popup window when you make a choice. The example below is for creating a Link List. Once you've installed a widget, the "Edit" options include "Remove Page Element."

Step 3 - Drag & Drop sidebar elements:

You can rearrange the positions of widgets by dragging and dropping them within the sidebar column.

Fonts and Colors

 

You can customize templates by changing the colors and fonts. For this example I'll use the Denim template, which is the one I started out with. The items you can change are shown on the right. On the Dashboard they appear in a scrolling window.

I modified the header by using Edit HTML (see next section) and then changed two of the colors. Start by selecting the element that you want to change (highlighted with a blue border). There are groups of pre-defined colors which you can click, or you can use the "Edit color hex code" box — but remember to press "Enter" on your keyboard to activate a new hex code.

The image below shows the top right hand corner of the Denim page layout. It can be fixed width or full width. I set the "Page Header Corners Color" to be the same as the "Page Background Color" and set a new color for the "Sidebar Title Background Color."

Template - Edit HTML

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.

An option at the bottom of the page, "Revert to Classic Template," will install the Classic Template — a version of Minima with layout customization options switched off.

I hope this tutorial has been useful as a quick introduction to customizing your theme. You can find further information by exploring Blogger Help

Related posts: Sidebar on the left | Static home page.