LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Navigation Bar / Website / Website Navigation Bar » Stylish Colorful Hover Style Page Navigation Menu For Blog And Website

Stylish Colorful Hover Style Page Navigation Menu For Blog And Website

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 animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

Stylish Colorful Hover Style Page Navigation Menu For Blog And Website

Features:
1.) Green Menu Bar With Orange Hover.
2.) Only HTML-CSS.

3.) Simple, Stylish, Easy To Use And Quick Load.

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>
#menu { width : 100%; height : 50px; background:#6abc45}
#menu ul { margin : 0; padding : 0; list-style-type : none; }
#menu li { float : left; }
#menu li a { background : #6abc45; display : block; width : 108px; height : 32px; text-decoration : none; color : #fff; text-align : center; padding-top : 10px; font-size : 95%; font-family : Arial, Helvetica, sans-serif; font-weight : bold; border-right : 2px solid #fff; }
#menu li a:hover { background : #ff8800; }
</style>
<div id="menu">
<ul>
<li><a href="##########" >What's New</a></li>
<li><a href="##########" >Apps</a></li>
<li><a href="##########" >Games</a></li>
<li><a href="##########" >Best Apps</a></li>
<li><a href="##########" >Reviews</a></li>
<li><a href="##########" >My WP7A</a></li>
</ul>
</div>

Customization:
1.) Change All Blue Hash With Your Links.
2.) Change All Red Text With Your Link Names.
3.) Done, Now Enjoy.

You Like It, Please Share This Recipe With Your Friends Using...

Be the first to write a comment.

Leave a Reply

Your email address will not be published. Required fields are marked *