How to Create a Horizontal Navigation Menu with Images

Since I’m so obsessed with blog design I’ve decided the time has come to do regular blog design tutorials – so here’s my first one.
How to Create a Horizontal Image Based Navigation Menu (Blogger)
Here’s an example of a particularly amazing image based nav menu.


So now to get started on making our own.
First of all design your navigation bar.



Divide it into separate navigation bar items.

                

Upload images to photobucket.
Next go to the ‘layout’ page on blogger.
Click on ‘add a gadget’

Select ‘add html/javascript’

In this box you need to add the following for each of the navigation bar images.
<img src="http://i720.photobucket.com/albums/ww203/altwhxre/9822a33d.jpg" width="136" height="56" alt="Home" ?>
You’ll find the img src under the html tab on the image that you uploaded to photobucket. Width and height of the image are self explanatory I hope. Alt is the name of your image.
Hit save.
Move the widget directly underneath the header.
This is what it looks like on the blog.




We’re not finished yet though. We now need to make these images link to the corresponding pages. So first of all you have created the pages and made a note of their URLs.
Re-open the html widget we created earlier.
Highlight the code for the first image then click on the link icon.



In the box that comes up – enter the url for the page that image links to.
Press OK.
Repeat this process for all of the images.
Then hit save.
Now we just need to tidy up the navigation bar and make it more fluid. To do this just open up the html widget once more and remove the paragraphs for each widget. So that all the image code is one long paragraph.
As you can see this rids us of the gaps and creates a fluid navigation bar.



It really is that simple.  Of course you can use any design you like I just did a very simple navigation bar design for demonstration purposes.
If you have any problems leave me a comment!