Create a horizontal navigation menu using images on Blogger

A navigation menu is one of the most important things for any website or blog. Think of all the different areas on your blog – all the posts, pages and topics.

You want your readers to easily find their way around and to be able to find what it is they are looking for. A great navigation bar or menu can do this!

There are so many way you can add navigation to your blog like with a drop down menu.

Todays tutorial will show you how to add a horizontal navigation menu to your blog including images.

I don’t recommend using images for you navigation as they aren’t as user friendly and search engines can’t follow them as easily. Instead I recommend a styled text navigation, which you can do with a custom font.

Horizontal navigation menu to your blog using images

1. Design your Images – Like with social media buttons, you’ll need to find some images to use. You could search online for some but if you’re going to use somebody else’s, you need to check their policies and copyright. You could create your own using GIMP (free alternative to Photoshop). Once you have your images, you’ll need to upload them to a hosting site such as Photobucket.
2. On Blogger – Click Layout > Add a new gadget > HTML/Javascript and paste the code below, filling in your details such as size, links and images.

<table width="TOTAL WIDTH OF NAV BAR" height="TOTAL HEIGHT" cellspacing="0" cellpadding="0" border="0" id="Table_01">

<tbody><tr><td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 001" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 002" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 003" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 004" /></a></td>

<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="DIRECT IMG URL 005" /></a></td>

</tr>

</tbody></table>

Horizontal navigation menu to your blog using images

1. Similarly to above, you need to upload your images to a hosting site. Take note of the width and height of the images.
2. On Blogger, click Layout > Add new gadget > HTML/Javascript and name it “NAVBARIMAGE”, you can delete or change this later. It’s just used to help with editing the HTML. The add the following code for as many links as you’d like. Add them one after another without any spacing, like shown. Fill in the details of the link and the width & height of the image you uploaded.

<a href="URL"><img src="DIRECT IMG URL 001" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a><a href="URL"><img src="DIRECT IMG URL 002" width="WIDTH" height="HEIGHT" alt"DESCRIPTIVE WORD"/></a>

Fixing the margins & padding for a horizontal navigation menu

On Blogger, click Template > Edit HTML and search for NAVBARIMAGE. You’ll see HTML#, note this. Close the Edit HTML and go to Template > Customise > Advanced > Add CSS. Paste the following code, changing # to whatever number is shown on your template. Margin-bottom will add space between the navigation bar and start of your blog posts. You can edit padding & margin depending on how you want it to look.

 HTML# { padding: 0px; margin-bottom: 10px; }