Blogger Image Navigation Menu | Life and Linda -Blog Design, Decorating, Tablescapes, Gardening

Blogger Image Navigation Menu

Some people like to really personalize  their blogs with a navigation menu that has images. Remember having a proper navigation  menu makes a world of difference to your readers.  They can find those pages, post or any other topic you have on your blog. I know this tutorial might be too complicated for some of my readers.  It looks complicated, however if you just follow my instructions, you can create a cute and different navigation menu.

Keep in mind, there are all kinds of navigation menu.  Drop down  is a very popular menu for those who have multiple pages in categories. This particular menu is using images for your pages.   It's great for a simple menu.


Images - Either you design them, find them online or buy them. I usually make my images the size I want to use, so there are equal in size. Start with editing the  images you want to use. Remember if you use any images online, make sure you have permission.  


You can see this example live on one of my test blogs
Go to Layout while in Blogger - usually under the Header, I click add a new gadget. Choose Javascript gadget.  See my example of where the Javascript should go?

Click in the box - Paste this code below  in the box. 

<table width="TOTAL WIDTH OF NAV MENU" 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="IMAGE LINK1" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="IMAGE LINK2" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="IMAGE LINK3" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="IMAGE LINK4" /></a></td>
<td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="IMAGE LINK5" /></a></td>

Ok, now that you have the code in the Javascript box, you now need to add your links to the pages and add the image link.

Let's use Tablescapes as an example.

 <tbody><tr><td><a href="URL"><img width="WIDTH" height="HEIGHT" alt="" src="IMAGE LINK1" /></a></td>

 <tbody><tr><td><a href=""><img width="100" height="100" alt="Tablescapes" src="" /></a></td>

 You can see the highlighted areas, where  I added my links. 
The first link points to my Tablescape page.
The img width I chose  is 100.  The height is also 100.
src=  is where I add my image link.

The alt= is optional, you can add the name to it, if you choose. It's for description purposes.

Now, you do this for every one of those links in the table.
One by one, adding the link to the page or label.
Add the size, which mine is 100 for width and height.
Then add your image link.

You can upload your images to Blogger or use Photobucket
or  something place else.  Copy the link where the image is being hosted.

Now, we need to change the cellspacing.  That shows spacing between each image on your navigation menu.  I chose 50, which spreads the images out, so that they are not close together.  You can play with this number. See below:

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

You should have all of your links filled in now.   Like I said earlier, this code goes into a Javascript gadget under your header.
Here's another example I created for a client.  The spacing is closer than the 50 above.

Share on Google Plus

About Linda @ Life and Linda

Hello, welcome to LifeandLinda. I am from Northern California. I enjoy blogging, Designing Blogs, Decorating, cooking, entertaining, gardening and clogging. I hope you enjoy your visit.
    Your comments are welcome!


  1. Oh, my goodness, Linda, you are truly the smartest one! I love the new look of your blog dress too.
    Be a sweetie,
    Shelia ;)

  2. Thank you Sheila. I thought it was time for a change with a new header. I try to share tutorials for bloggers who want to change their templates up.

  3. You're such an expert with all this, Linda! I love your pretty new header!

  4. I didn't know this feature was available. How brilliant. Thank you for the tutorial!!!

  5. Great tutorial Linda, sometimes the images for a header make the blog! I am also loving your new header, it's really pretty!

  6. While I was reading this, I was reminded of the time when I first started blogging and so badly wanted a navigation bar and no matter how hard I tried, I just couldn't figure it out. If I had a tutorial like this, it would have been a snap! Great job, WW.
    So fun chatting with you this week. Lots of love to you! xoox

  7. OH thank you for these. I'm going to mess with them next week.


I so appreciate your visits and sharing your thoughts at Life and Linda.