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:
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">
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://1.bp.blogspot.com/-G8qsTuNGKUY/VuyeLZAwm_I/AAAAAAAAgPo/tWrxC3YNEr0_7Q0ojGysQsftdW-sTWJpg/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">
Here's another example I created for a client. The spacing is closer than the 50 above.