Many of my friends are asking about this that he want something like this to make them site stylish, Today i think he will be happy and also i am.So with out any loss of time first see the demo then use our simple coding.As we know “That An Image Is Much Better Then Thousand Words.” so put some images on your menu bar to describe him in gentle way.One of the most important gadget in blog is navigation menu. Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages.
So now we going to show you how to add stylish Hover HTML-CSS Text Menu With Images On It navigation menu to Blogger/Website Or Other Also. This navigation menu make your blog attractive and stylish blog. This menu perfectly work only on some browser such as Explorer, Chrome, Firefox, and Safari. Here we using simple HTML-CSS only.
Table of Contents
Features:
1.) Image On Text.
2.) Both Have Same Time Hover Effect On Mouse.
3.) Add Unlimited Menu.
4.) Simple And Stylish With Easy Instillation.
5.) Quick Loading Time.
6.) Pure CSS, No JQuery.
7.) Can Customize Fully.
8.) Short And Simple Code.
9.) Easy To Install.
10.) SEO Optimized.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Layout.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT”
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
<style>#exebasemenu li.exemenu-exemenupic-0000 a {background: url("SIMPLE IMAGE URL") no-repeat top;line-height: 10px;padding-top:50px;text-align: center;}#exebasemenu li.exemenu-exemenupic-0000 a:hover {background: url("ON HOVER IMAGE URL") no-repeat top;}.exemenu li {float:left;position:relative;margin:0;}.exemenu a {display:block;position:relative;}.exemainnav li a {font-family:"Lucida Grande";text-transform:uppercase;font-size:12px;color:#2d2d2d;text-decoration: none;}.exemainnav li a:hover {color:#f8f19e;}</style><div id="exebasemenu" ><ul class="exemainnav exemenu"><li id="exemenu-exemenupic-0000" class="exemenu-exemenupic exemenu-exemenupic-0000"><a href="##########">Home</a></li>
<li id="exemenu-exemenupic-0000" class="exemenu-exemenupic exemenu-exemenupic-0000"><a href="##########">About Me</a></li>
<li id="exemenu-exemenupic-0000" class="exemenu-exemenupic exemenu-exemenupic-0000"><a href="##########">My Portfolio</a></li>
<li id="exemenu-exemenupic-0000" class="exemenu-exemenupic exemenu-exemenupic-0000"><a href="##########">My Works</a></li>
<li id="exemenu-exemenupic-0000" class="exemenu-exemenupic exemenu-exemenupic-0000"><a href="##########">Contact Me</a></li></ul></div>
Customization:
1.) Change All Blue Hash With Your Menu Links.
2.) Change All Red Text With Your Menu Links Names.
3.) Change SIMPLE IMAGE URL With Your Simple Image URL And Change ON HOVER IMAGE URL With Your Hover Image URL.
4.) Save And Done.
Sir, I have sent you a message using your Contact Us Page. Please Check my message fast..
Thank you….:)
Check Out Our Reply.
You Are Welcome…
Cool Stylish Hover HTML-CSS Text Menu…and do you have a tutorials to your
live demo button?
Thanks..
You Are Welcome… E-Mail Us To Get The “DEMO Button” Code.