Top 10 Blogger Customizations

Google’s Blogger platform offers users complete access to their template code. This enables Blogger users to customize their template in any way they choose, by changing the layout, design or adding extra functionality which is lacking in the default templates.

While community support for Blogger is still nowhere near the capacity offered by the Wordpress community, there are still many dedicated Blogger enthusiasts tweaking away at the template code to devise new customizations, functions and hacks which we can use to enhance our readers’ experience of Blogger hosted blogs.

In this post, I’ll outline the top 10 most useful customizations for Blogger blogs (in no particular order) with links to the original tutorial pages.

1. Numbered Page Navigation

Many of the world’s most popular blogs offer pagination links beneath the main posts section, enabling readers to easily flick through the archives and discover posts of interest. Wordpress blogs are able to use a simple plugin to add this functionality, but a solution for Blogger users has eluded us for some time.

Thankfully, Mohamed was able to create an inline JavaScript function which relies on the Blogger Atom feed to parse blog pages and replace the default “newer/older” posts links with page numbers instead.

Mohamed offers two styles of pagination options:

• Adding code directly to the Blogger template
• Adding an extra widget containing the code to the Blogger layout

Both methods are quite simple to implement, though personally I would recommend adding the inline code as there is more room for customization of the pagination appearance and less chance of incompatibility with your particular template of choice.

Learn how to add page number navigation in your Blogger template

2. Create a three column template from a default Blogger design

While Blogger templates are now in great supply, many Bloggers still prefer to modify their existing template to include new features.

Of all the tutorials I have posted on Blogger Buster, the post describing how to add a second sidebar is still the most popular to date. In this tutorial, I explain how to change the layout of the default Minima template to include a second sidebar. It’s also useful for understanding how Blogger templates work and can be adapted to other default template styles.

Learn how to add an extra sidebar to your Blogger template

3. Add a “Tag” cloud to your sidebar

Have you ever wondered how bloggers display a stylized tag cloud in their layout with the weight of links dependent on the number of posts associated with each tag?

Blogger authors can assign a “label” tag to each of their posts. These act like categories, but also include the rel="tag" code for label links which are indexed by sites like Technorati and Del.icio.us.

Phydeaux3 offers us a stylish method of displaying Blogger labels as a “tag” cloud which can be customized to alter the color and weight of tags according to the number of posts filed under them. The method does require some extensive editing of the template code, but once added, you can move your newly modified label widget to any place in the template.

Take a look at Phydeaux3’s Label Cloud hack for Blogger.

4. Post Summaries for Blogger

Post summaries for the home and archive pages of Blogger blogs is still a feature which many of us would like to add for our blogs.

While unavailable to use in the default Blogger set-up, Ramani of Hackosphere was able to develop a JavaScript based solution to hide portions of larger posts on the front page of our blogs.

After adding the required code to your template, you will be able to choose which part of the post is hidden on the home page by editing the HTML code of your posts.

Take a look at Ramani’s tutorial here.

5. Add a simple navigation bar above the header

Hans of Beautiful Beta offers a simple, customizable solution to add menu links to our Blogger templates. These links can be added easily as elements of a link list widget, and will display side-by-side.

Once added to your template, you can easily style these links using simple CSS or even background images. It’s a very useful feature to add to your blog, especially to provide links to important blog pages for the benefit of your visitors.

Learn how to add a navigation menu to your Blogger blog.

6. Add a favicon to your blog

Favicons are the tiny icons which appear beside the URL in the browser bar. By default, Blogger hosted blogs will display the orange Blogger favicon in this place, but you can easily change this.

By creating your own distinctive favicon, uploading to a file host and adding the correct link codes to your template, you can change the default Blogger icon with something more in keeping with your own design.

Annie of Blogger University has written an extensive and highly useful feature to explain how to add a favicon in your Blogger powered blog.

Learn more about adding a favicon by reading Annie’s post.

7. Hide the Blogger Navbar

A defining feature of Blogger hosted blogs is the nav-bar: a blue, grey or black strip across the top of the page which offers search functionality and links to other blogs in the network.

Many Blogger users prefer to hide the Blogger nav-bar which offers a more professional appearance to their template. Peter Chen has posted an easy tutorial to hide the Blogger nav-bar which only involves adding a couple of lines to the style section of your template.

Learn how to hide the Blogger nav-bar.

8. Number comments in Blogger

By adding consequent numbers to each comment, you can make it easy to reference the comments left by others and also add a stylish appearance to the comments section of your posts.

Blogger’s comment system is rather complicated in relation to that employed by Wordpress and other systems. Being a closed system, all comments are hosted on Blogger servers and are referenced by their unique ID. These ID numbers do not seem to follow consecutively for each post, which has made it difficult for Blogger users to make use of a simple numbering system.

Luckily, Fernandoo1 shows us how to add some simple JavaScript code to the comments section. This enables each comment in the definition list used for comments to be numbered consecutively in the design. The permalink structure for each comment will still reference the Blogger generated ID number, but at least this is a useful and stylish method of numbering post comments in Blogger.

Learn how to number comments in Blogger.

9. Link to related posts with each article

Links to related posts beneath each article is a useful method of providing relevant content to readers and acts as an encouragement to read more pages on your blog.

There are several methods you could use to display a list of related posts, and the most popular seems to be Jackbook’s modification of the original widget developed by Hoctro.

This method parses your blog’s label feeds and displays a list of recent posts relative to the labels assigned to your posts. Using this method, you can customize the numbers of labels and posts displayed in this list, and offer your readers more interesting content to browse after reading an initial article.

Learn more about Jackbook’s related posts method for Blogger.

10. Add a table of contents with post preview

I’ve noticed many popular blogs which offer archive pages with links to all posts in a particular category or as monthly lists.

Blogger users do not have a template available to display links to monthly or category archives in the same manner as Wordpress users. Instead, we must create such pages by hand, or rely on third party scripts to generate these lists.

Vin of Dummies Guide to Google Blogger Beta has established a useful method of utilizing Google’s Akax Search API to create a table of contents widget with post preview. This enables us to add a fast loading list of all blog posts to our sidebar (or indeed, a post page) which visitors can use to quickly browse through posts of interest to them.

Learn how to add an Ajax Table of Contents widget to your Blogger blog.

What are your favorite Blogger “hacks”?

This top ten list is only a small selection of the hacks and customizations available for Blogger. Do you have any favorite customizations which are not listed here? What else would you like to see added to the Blogger toolbox?

Please let us know about your favorite customizations (or proposals for new hacks) by leaving your comments and opinions below.