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!
14 comments:
Thank you Jenny! This is awesome.
I snagged a button :)
I googled how to make a blog button and got your website. Your tutorials are very helpful. How did you get your bird image/icon to appear in the address bar with your blog address and at the end of each post. Please email any helpful tips you may have. amyg0425@hotmail.com
Thanks so much!
HELP! I have the header but when I go to paste in the URL locations of my images, it only makes red "x" there.
bjoverstreet@arkbluecross.com
This tutorial rocked my socks!
Here's how it turned out!
Thanks SO much for this! You rock!!!! :D Now my nav bar is all sorts of purdy!
I so HAPPILY stumbled upon your site :) :)
So happy I did....THANK YOU for such CLEAR instructions :)
I did it!! I have my very own pretty nav bar with images :) :)
THANKS SO MUCH!!!!
Thank you very much for this. Excellent tutorial and very easy to follow.
Thank you for such a user-friendly tutorial! I have been looking all over for a tutorial on how to add images to the navigation bar!
Thank you, thank you, thank you!
add the HTML after where??
Thank you thank you thank you! These were very clear and helpful instructions!! Take a look at your handy work if you want!
http://www.her-house.blogspot.com
Thank you so very much for this tutorial! I used this, along with the previous tutorial on how to do a custom nav bar, and I'm so pleased with the results. :)
www.mamamarchand.com
Thank you so much! I was looking for this! xoxo
When you create the images for the navigation bar, what size does each one need to be? Thanks!
how to link a post to same nagavation button
Post a Comment