How To Make Image Link Menu Navigation Bars (Navigation Menu Bar on Blogspot III)
>> Friday, February 19, 2010
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{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).
font-size:100%;
list-style-type: none;
display:inline;
padding:0px;
margin:10px;
border:0px solid;
}
On your Dashboard >> Layout >> Page Elements, and click Add a Gadget on Header. and choose to add HTML/JavaScript.
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{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.
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;
}
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.
46 comments:
Great article ... exactly what I was looking for.
Can not wait for the next article about how to make button menu navbar....
Thanks ..
==================================================
CG
Nice post, it is very detailed and easier to understand because of the images used. I am not really a super techy person, but your explanation is so clear. Thanks for sharing and looking forward to see more interesting post from you.
great post, thanks for this post
Hello. Great job. I did not expect this on a Wednesday. This is a great story. Thanks!
I Think of your talents as the things you’re really good at. They’re like personality traits. For instance, you may be a very creative person, or a person who’s really good at attending to details or a person with a gift for communicating. Your talents are the base for any successful business venture, including a home-based business.
ausome
thanks for sharing
What a fabulous post this has been.I am grateful to you and expect more number of posts like these. Thank you very much.
I have saved this webpage and I truly intend on visiting the site in the upcoming days.
Keep up the excellent work!
Thanks a lot for this opportunity to know this information.
That's a really innovative and coo looking window they designed to show off! It's amazing at what you can come up with when you partner with another powerhouse company. I bet it helped keep the sales up even though the economy isn't back in full-swing yet.
I wanted to thank you for this great read!! I definitely enjoying every little bit of it I have you bookmarked to check out new stuff you post....
I found your website perfect for my needs. It contains wonderful and helpful posts. I have read most of them and got a lot from them. To me, you are doing the great work. Carry on this. work at home In the end, I would like to thank you for making such a nice website.
Thanks for the nice blog. It was very useful for me. Keep sharing such ideas in the future as well. This was actually what I was looking for, and I am glad to came here! Thanks for sharing the such information with us.
I have been looking for this,I loved to read your article.You must be putting a lot of time into your blog!
Hey very nice blog!! Man .. Beautiful .. Amazing .. I will bookmark your blog and take the feeds also...
I was looking for some topics that are enough popular and finally founded your blog, it has superb topics with great popularity.
Good trick from you. THanks mate, I'll use this as my future reference.
As I observed the codes are perfectly good.
Great work dude, u gave nice post to us. Thanks for spending the time to discuss this, I feel strongly about it and love learning more on this topic.
Pretty good post. I just found your site and wanted to say that I have really enjoyed browsing your posts.In any case I’ll be subscribing to your blog and I hope you post again soon .It is so lucky to read your blog,it is full of useful message.I wish we both can do better in the future.It great honour if you can visit our website,and give us some suggession
What I would not give to have a debate with you about this. You just say so many things that arrive from nowhere that Im pretty certain Id have a fair shot. Your blog is fantastic visually, I mean people wont be bored. But others who can see past the videos and the layout wont be so impressed with your generic understanding of this subject.
Very creative. One of the most interesting things about living in the computer age is the way that modern technology has been made affordable and readily available to all sorts of people, and you see inventive things like this training bike visualization, which would perhaps never have existed in, say, 1990. You might want to go ahead and patent this invention and see if there’s a market for it. If there’s such a thing as a car service that does nothing but attach spinning rims, then it’s certainly not hard to imagine a market for something a little more practical and cool, like this.
Pretty good post. I just stumbled upon your blog and wanted to say that I have really enjoyed reading your blog posts. Any way I will be subscribing to your feed and I hope you post again soon.
Thank you for an additional great post. Where else could anyone get that kind of data in these a ideal way of writing? I’ve a presentation subsequent week, and I’m on the look for this kind of information.
What I wouldn't give to have a debate with you about this. You just say so many things that arrive from nowhere that Im pretty certain Id have a fair shot. Your blog is fantastic visually, I mean people wont be bored. But others who can see past the videos and the layout wont be so impressed with your generic understanding of this subject.
Wow how time flys when your searching the net.. Been after info on just this topic. Thanks to you and google i now have it.
Wow how time flys when your searching the net.. Been after info on just this topic. Thanks to you and google i now have it.
Pretty Interesting post. Could not be written any better. Thanks for sharing!
Good post.thanks for sharing.. very useful for me, I will bookmark this for my future needs.
Its really wonderful and watchable. I like to share it with all my friends and I am sure they will like it.
Thanks a lot for a bunch of good tips. I look forward to reading more on the topic in the future. Keep up the good work! This blog is going to be great resource and I love reading it.
Interface Talent Network
Pretty awesome post. Thank you.
I've scan the internet over 3 hours today, plus your weblog has been the coolest coming from all. Many thanks; it really is useful to me.
wall bike rack
Research report writing.
Creative writing exercises
. How to do a book report.
Book report format.Essay topics for high school students.
Presentation topics for college students.Write a book report.
Five paragraph essay. Education essay.
Thanks for this. I really like what you've posted here and wish you the best of luck with this blog!
Just wanted to say great job with the blog, today is my first visit here and I’ve enjoyed reading your posts so far
Thanks for taking this opportunity to discuss this, I feel strongly about it and I take pleasure in learning about this topic.
It's such an honor to offer the opportunity to sign up for the debate of this excellent web log! I wish to prolong my thank you for this kind of.
If you want to begin to see the unbelievable post using genuine information as well as statistics, it is really huge impacts upon readers and I admire your composing expertise with the creator.
I happen to be thankful that I stopped by in a site that is able to grant as well as offer me great deals of finding out and expertise. By having the broad of same web sites in the net, I won't be able to seek the best blog because of their similarities. At last, the uncommon site I happen to be hunting for several days is currently in your website.
I like seeing web sites which view the price of providing a perfect resource free of charge. I must say i cherished studying this page. Thanks!
Making this blog happen really gives me the best idea on how to make image link menu. Thanks for sharing this information!
There are certainly a lot of details like that to take into consideration. That's a great point to bring up.
thank you so much! now i have a nice menu bar for my blog! very helpful!
That is an extremely smart written article. I will be sure to bookmark it and return to learn extra of your useful information. Thank you for the post. I will certainly return.
I don’t know how should I give you thanks! I am totally stunned by your article. You saved my time. Thanks a million for sharing this article.
Post a Comment