Ok, now that you know how to create a Navigation Bar let me explain how to add images* to your navigation bar instead just using text, similar to the one above! Each navigation link such as About me, Blog Roll etc were each different images. So for the above navigation bar I had to create four different images, one for each link!
Remember the HTML code you added in a widget under your header? That's what you are going to tweak in order to have an image for your link instead just text. Your current code in your widget should look something like this:
<div id="newnavbar"> <ul> <li><a href="http://all-about-me.html">All About Me</a></li> <li><a href="http://blogroll-html">Blog Roll</a></li> <li><a href="http://giveaway-html">Giveaways</a></li><li><a href="http://contact-me.html"\>Contact</a></li> </ul></div>
Now you are going to replace the WORDS that appear on your navigation bar (YELLOW words)with this code.
<img src="URL address of your uploaded image"/>
After you have replaced all the Words such as All About Me etc with your new code including the url address of your images then click save and enjoy your new customized navigation bar!
On a side note, the padding and margins may need to be adjusted in order to fit the new images!
*You will need to upload your images to the Internet. You can use flicker, photobucket, picasa or simply upload them in a post on Blogger!! There you will be able to get the URL address for the image! That address is what you paste into red html code above!
I hope this was easy to follow! Any and all feedback is always appreciated!