Introduction

Recently, (before making the switch to Wordpress) I have been an "over-active" member of the Blogger Support Group, hosted by Google Groups.  The aim of this group is to provide user-to-user support for common issues with Blogger, template design and faults, publishing issues and other general support.  As far as we know, no Blogger staff frequent the group and it has been left to people like myself to offer assistance to fellow Blogger users.

The most common questions on there are along the lines of

  • "how do I put a picture at the top of my blog instead of the title"
  • "how do I add a new list of links in my sidebar – and where do i put it in my template?"

In this series of posts, I aim to walk through a basic Blogger template overhaul, concentrating on things that are asked most in the support groups.

  • Adding header images and graphics
  • Changing font sizes and colors
  • Adding sidebar links, pictures and "extras"

The format of this series will be presented from the perspective of "what do I want to achieve" and "how I go about it" rather than covering all aspects of template editing – which could take a long time (but might end up being my first book!).  Almost as if you will be watching me perform an overhaul on a basic blog.

My Template is my Temple

All Blogger designs are based on a text based template.  A template consists of the programming code that defines such things as:

  • The way the blog looks (colors etc)
  • The layout of the blog (is the sidebar on the right or the left and how wide is it etc)
  • The Blogger code (showing posts, comments, archives, footers etc)

By changing the template code, you can affect the look and feel of your blog without loosing any of the posts or comments.  Think of it as redecorating a room in your house and putting back all the same furniture afterwards.  The content is the same, it just looks different!

Choosing a template in Blogger

To choose a template in Blogger, you will need to sign in and click the settings icon next to your blog in the dashboard.  Then, click on the Template tab at the top of the screen and you will be able to see your current template code listed in a window below.  To choose a new template, click the "Pick New" link just below the tabs and you will be presented with a list of the 31 preset Blogger templates.  Click the "Use This Template" button below the design you like and accept the warning message.  But be aware that doing this will completely wipe your current blog design (see Backup, backup, backup! below).

Editing the Template

The easiest way to edit the template is to type the changes directly into the code in the Template window.  However, the box that you are given to edit in can be too small, you can't easily search within it and its easy to get lost.  You can use a text program such as Notepad to edit the template which will allow you to search, replace and browse the code more effectively.  You can also make this window full screen so you can really see what you are doing. The thought of using applications like Notepad leads me onto my next point.

Backup, backup, BACKUP!

Now, an important note about backing up your template.  Blogger is not perfect by any means and I have lost several template edits or been left with a totally corrupted template a few times in the past – so make sure you save a copy first before you start fiddling!

  • In the Blogger site, click once in the template code
  • Press CTRL+A to "select all"
  • Press CTRL+C to copy the text and paste it somewhere safe, like Notepad.
  • Save the file locally to your PC for safe keeping.

I can't stress how much of an important habit this is to get into.  In my opinion, you would be better off using a text editor like Notepad to do your changes and then copy and paste the code back into the Blogger template editing window.

Publish Or Be Damned

After you change or edit your template, make sure that you republish your entire blog.  This will ensure that the new design is filtered throuout your whole blog and not just the front page. A common issue after republishing, is that you make changes to the template and then cannot see the updates immediately.  Ninety nine percent of the time, this is due to you seeing a locally cached version of the page.

  • If you are using Internet Explorer or Firefox, press CTRL+F5 when viewing the page.

This will force the browser to download a new copy of the page from the server.  Emptying your local temporary internet files will also have the same effect.

Image Hosting

If you plan to use images within your template, you will need to have the hosted on a site.  I use and recommend Flickr for this purpose.  Read the Flickr FAQ here for more information.

File Hosting

If you plan to offer file downloads from your blog, you can use one of the various free filehosting service on the internet.

In the next part of this series, I shall be examining a basic template and defining the different "Zones" and what happens in each one.

This is part of the Blogger Template Overhaul series.

Part 1 – Introduction
Part 2 – Template Code
Part 3 – Design
Part 4 – Headers
Part 5 – Posts
Part 6 -  Comments
Part 7 – The Sidebar
Part 8 – The Footer

Related: