Navigations

Having relevant icons beside your navigation links is a great way to draw attention to them. In the image above, you can probably tell at a glance where all the links will lead. This trend of modern web design not only looks good, but is also a useful way to help your readers navigate to important content in your blog.

In this post, I'll explain the method I use to add icons beside navigation links in Blogger template designs.

Explaining the method

n the image above, the links are part of a link-list. Each individual link in the list is displayed inline, and is wrapped in span tags. Furthermore, each link is coded with its own class.

There are three essential steps to make icons appear beside links in your blog:

1. Find icons (in GIF format) to suit your blog's theme, and upload these to an image hosting service.
2. Add the code for the links into an HTML/JavaScript widget in the blog layout.
3. Style these links with a background image by adding some code to the section of your blog template.

We need to add the links manually in an HTML/JavaScript widget for this to work. This is because we cannot edit each individual link in a regular link list widget, which is required to ensure each link features its own image.

This method is really not as complicated as it sounds!

Once you've tried this method for yourself, you'll get a much better understanding of how this method can work for you. To get started, try using the code and example images below to add images to a navigation area in your own blog template. Then afterwards, you can easily change the icons and style to suit the style of your own blog theme.

How to add icons beside your navigation links (example icons and code)

In this example, we will add icons to the three most popular navigation links used by bloggers: the "Home", "About" and "Contact" links.

The end result will look something like this in your template (though the font and colors may differ, depending on the styles already in place in your own template):

Step 1: Add the code for your links in an HTML/JavaScript widget

In the layouts section of your Blogger dashboard, choose to create a new HTML/JavaScript widget where you would like these navigation links to appear. This could be in your blog's sidebar,, in a widget above the posts or within the header section if you prefer.

Then paste the following code into your new widget, substituting the links highlighted in red for the URLs of your home page and relevant post pages: