How to add icons beside your navigation links

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

In 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 <b:skin> 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:

<div id="menu-items">

<ul>
<li><span class="home"><a href="http://your_blog_url.com">Home</a></span></li>

<li><span class="about"><a href="http://your_blogs_about_page.com">About</a></span></li>

<li><span class="contact">;<a href="http://your_blogs_contact_page.com">Contact</a></span></li></li>

</ul>
</div>

At first, these links will appear like a regular, unordered list with bullet points instead of the images we require. So now, we need to add some style to the template, which will make the links appear beside each other (inline display), feature relevant background images for each link, and be evenly spaced.

Adding the relevant code to your blog's template

For this part of the tutorial, you need to edit your blog's HTML code, so go to Layout>Edit HTML in your Blogger dashboard.

To add the style for your new navigation links, you can simply copy and paste the following code just before the closing <b:skin> tag on your blog template:

#menu-items ul li {
display: inline;
font-weight: bold;
list-style-type: none;
padding: 5px 5px 5px 0;
margin: 0;
}


#menu-items li span.home {
background: url('http://bloggerbuster.com/images/bb_post/home.gif') no-repeat;
padding: 0 0 0 20px; }


#menu-items li span.about {
background: url('http://bloggerbuster.com/images/bb_post/about.gif') no-repeat;
padding: 0 0 0 20px; }


#menu-items li span.contact {
background: url('http://bloggerbuster.com/images/bb_post/contact.gif') no-repeat;
padding: 0 0 0 20px; }

Now if you preview your blog, you will see your newly added navigation links now feature the icon images to their left. Once these modifications are complete, you can choose to save your template and enjoy the added style to your navigation links.

If you would prefer to host these icons on your own server, you can download the icons to your computer, upload them to a new location, and change the URI's for these to match their new location.

Here are links to the icon files (right click and choose "Save As..."

• home.gif


• about.gif


• contact.gif

If you would like to add more links and different images, the simplest method would be to duplicate the format of the style (using a different class), then add another link to the list, referring to the class you have just created.

Here is an example of what the style code may look like in your template:

#menu-items li span.anotherpage {
background: url('http://yourimagehost.com/images/anothericon.gif') no-repeat;
padding: 0 0 0 20px; }

The items highlighted in red are those which you would need to alter to suit your new links and icons.

Here is an example of how to call a new link (and associated icon), which could be added to the code in your HTML/JavaScript widget, just before the closing </ul> tag:

<li><span class="anotherpage"><a href="http://another_blog_page.com">New Page Title</a></span></li>

Important notes

The icons used in this example are have the dimensions 16x16px. To display larger icons, you may need to adjust the padding of the lost items, otherwise your images may appear cropped from above and below.

If you need to use icons which have transparency, you should ensure these images are presented in GIF format, rather than PNG. Internet Explorer 6 and below cannot display PNG transparencies correctly, so when viewed in these browsers, your icons would appear incorrectly.

Final thoughts

I hope this tutorial has provided you with the tools and knowledge to create your own styled navigation links, and expand on these examples to create links which are more suited to the style of your own blog.

Here are some resources for free icons if you're looking for alternatives to the ones used in this example:

• Iconlet: a search engine for free icons


• Silk Icons: a huge download featuring over 700 free 16x16px icons


• TwoTone icons: A collection of simple 16x16px icons in editable Photoshop and GIF format.

Feel free to leave your comments and suggestions below. I look forward to seeing how you have used this tutorial to add style to your own Blogger template designs.