How To Make Image Link Menu Navigation Bars (Navigation Menu Bar on Blogspot III)

In a previous posts, we have discuss about "How To Make The Navigation Menu Bar I" as a simple HTML script and "How To Make The Navigation Menu Bar II" for make it more attractive with CSS..
In this post we will discuss How To Make Image Link Menu Navigation Bars so that we can change the Menu Navigation Bar with images or buttons.

Images Link Menu Navigation Bars.

Of course our first step is to have some images that each picture will represent each link of our menu navigation bar. You can search from the net for "free downloadable images/picture" , edit and resize it or even create a new ones for your own with image editor like Picasa
After finished these images/pictures, keep/host on the server and note the URL of your files images. There are so many free server that allowed us to keep our images on them, just  search "free image server". or you can look at  Using Google Group or Google Site as Web Storage.

The basic methode is similar to the way of making a Simple Navigation Bar . the differences is Simple Navigation Bar base on text link, while this one base on image link.

In your HTML Template (Dashboard > Layout > Edit HTML) insert this CSS between ..., I suggest to put in under /*Header*/ or ]]> to make it easy to remember.

#navbarmenu ul li{
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}

The next step is create the menu links list (as we did in How To Make The Navigation Menu Bar on Blogspot (I)  but in a LIST form).

On your Dashboard >> Layout >> Page Elements, and click Add a Gadget on Header. and choose to add HTML/JavaScript.

 

(Note : If you want to add "Add a Gadget" Widget on your Page Elements Please visit  http://doit2us.blogspot.com/2009/11/add-add-gadget-on-header-and-blog-posts.html .)

If the previous steps are very similar with making a Simple Navigation Bar . The next following steps is to distinguish between text and images navigation bars. The key is the Script below

Next step leave the Title Column empty, Copy the Script below and insert in the column content

<div id='navbarmenu'>
<ul>
<li><a href="URL of Home page"><img src="URL of Home image"></a></li>
<li><a href="URL of Music page"><img src="URL of Music image"></a></li>
<li><a href="URL of Books page"><img src="URL of Books image"></a></li>
<li><a href="URL of Video page"><img src="URL of Links image"></a></li>
<li><a href="URL of Profile page"><img src="URL of Profile image"></a></li>
<li><a href="mailto:EMAIL ADDRESS"><img src="URL of Email image"></a></li>
</ul></div>

Change the URL Link Page with the address where you want your guess directed to, and URL Link Image.with the address of your URL images from your server.

To make the display of your NavBar more attractive, You can combine with Hover effect, and  Visited Link by CSS. 
The following CSS Script is a sample of it.

#navbarmenu ul li{
list-style-type: none;
display:inline;
margin:0px;
padding:30px;
border:0px solid;
}

#navbarmenu li a img{
height:30px;
width:30px;
}

#navbarmenu li a:hover img{
height:40px;
width:40px;
background: #ff0000;
}

#navbarmenu li a:visited img{
height:40px;
width:40px;
background: #0000ff;
}

While text link Nav Bar change the color text display after visited or hover mouse on it. In this sample Image Link Nav Bar, The skenario is : The navigation bar image link was set to 30 x 30 px and there is no border surround it, when the mouse cursor hover on it, the image size will raise to 40 x 40 px.with a red background. Any visited link will have a blue background behind.image.

You can also create reverse effect, that the images became smaller when mouse hover on it and for the visited link.
Please change the setting of the script according to your creatifity, just play for a while, explore and found your best setting...

In the next post we will discuss how to make Button Menu Navigation Bar.