Saturday, August 6, 2011

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.
Capture3
So now to get started on making our own.
First of all design your navigation bar.
Untitled
Divide it into separate navigation bar items.
about     beauty    faqfashion        home
Upload images to photobucket.
Next go to the ‘layout’ page on blogger.
Click on ‘add a gadget’
Capture

Select ‘add html/javascript’
Capture2
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.

Capture
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.
Capture
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.
Capture
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!

5 comments:

  1. THANK YOU SO MUCH! Ahhh I've been trying to find out how to do this forever. Will be applying to my own blog in the near future!

    -Marie
    So What If I Like Pretty Things

    ReplyDelete
  2. THANK YOU THANK YOU THANK YOU!!!!!
    I'm bookmarking this and stumbling this to share with others! I'm sort of in a bit of a blogging overhaul myself and I really wanted to know how to do my own tabs & designs like the Pleated Poppy image example! If I get stuck can I drop you an email doll?
    Hope alls good in London town - heard it's going to get cold from the weekend so wrap up!
    x.o.x.o

    ReplyDelete
  3. I've been having issues with my pages so I tried this, and it looks exactly the same, I have the pages widget, so I tried deleting that but that only made them disappear, help please?

    ReplyDelete
  4. Hi i'm having trouble understanding the whole "make pages" thing, like is each individual page on your blog a separate blog? Thanks for your time, saw you at TOWIB and thought you were great x x

    ReplyDelete
  5. fyi your choice of type color make reading your information nearly impossible...

    ReplyDelete

i love comments i check out all your blogs :)