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.

BLOGGER HORIZONTAL  MENU WITH IMAGES:

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.  

 HERE'S AN EXAMPLE:

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> </tr> </tbody></table> 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="http://www.lifeandlinda.com/p/tablescapes_29.html"><img width="100" height="100" alt="Tablescapes" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4HIbFhIdAhGBDlph1rXhlQ7ka_a0IA-KBq7v7PIWC1VztCeVX9KEFeZ1O9iu_606aVHV0BDdsJ5leHsIku6iTEunUjxCSGI3Bs2px1x2yNqi_-9RJPnFMQefHh6pfOZmZUcgTA6niskE/s1600/TABLESCAPEA.png" /></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.

Sign up with your email address to receive the latest updates straight in your inbox.

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.