Today I'll show you how you can create a navigation bar like the one we have. With images that change upon mouseover. I had to look around the web a lot to find something that actually works so I decided to show you what I've learned, to make your own easily :)
First of all you will need:
Account in Photobucket or a similar site
1) Now you must decided how big you want your navigation bar to be. Mine is 900x87
Alternative: Go to the "Desing" window on blogger and select "Template Designer". There, click on the "adjust widths" button. This will give you the yardstick by which you will decide your navigation bar.
2) Next draw your navigation bar.
Now, you must understand that when the navigation bar change upon mouseover it's basically two images saved on top of the other as one.
So what you need to is in a new layer draw small lines to define the space between the buttons.
After that create a new layer and draw the images you want to show after the mouseover.
Ok. navigation bar is basically a series of images next to each other.
3) Start cropping and saving each image and uploading them on Photobucket. If you have 4 categories like us you should end up with 8 pictures saved in photobucket.
4) Now, go to design --> Page elements and add a HTML gadget.
Cope and paste the following code:
<a href="href="http://YOURBLOG.blogspot.com/search/label/YOUR LABEL">< img src='YOUR FIRST IMAGE URL HERE' onmouseover="this.src='YOUR SECOND IMAGE URL HERE" onmouseout="this.src='YOUR FIRST IMAGE URL HERE" border="0"/></a>
The purple code is the main one (between the <center><ul> and </center></ul>) Whenever you want to add a new image just copy and paste the main code.
I hope i explained this briefly.
If you have any questions please contact me :)
video tutorial that really helped me, check it out ;)