Breaking News:

latest

Stylish Hover Page Navigation Menu For Blogger

Hello and welcome to GetWebInfo.Com. Here on this post you can know that how can you add Stylish Hover Page Navigation Menu in Blogger. This...

Hello and welcome to GetWebInfo.Com. Here on this post you can know that how can you add Stylish Hover Page Navigation Menu in Blogger. This is one of the most important gadget in blog is navigation menu. Navigation menu help to 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 for your blog visitors.




Here is the picture of Navigation Dropdown Menu




Features


  • Simple and Very Easy to Install
  • Menu with Hover and Awesome Look
  • Easy to Add Links and Use
  • No J-Query File
  • Speed Loading Time

How to Add in Blogger BlogSpot?

Step 01. Go to Your Blogger.com

Step 02: Open Your Desire Blog where you want to add this widget as your blogger menu.

Step 03: Go to Template Layout

Step 04: Click "Add a Gadget" Where you want to Add it.

Step 05: Now scroll to "HTML/Jvascropt" 

Step 06: Click on "+" icon to Add it.

Step 07: Now copy the Below code and Paste it to there.

Step 08: Leave the Title Empty

Step 09: Click On Save button and now you can all done.


<style>
#exenav-left{float:left; display:inline; width:100%; padding-left:2px; padding-top:5px}
#exenav{clear:both; margin:0 auto}
#exenav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}
#exenav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:40px; display:inline;}
#exenav ul li a, #exenav ul li a:visited{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#333333; border-radius:4px 4px; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0}
#exenav ul li a:hover{border:2px solid #111; background:#3399FF top left repeat-x; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav ul li a.current, #exenav ul li a.current:visited,
a:hover {text-decoration:none;} a img {border-width:0;}
#hb{height:40px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav-element{width:100%; margin-top:-24px; padding:0}
</style>
<div id='hb'>
<div id='exenav-element'>
<div id='exenav-left'>
<div id='exenav'>
<ul>
<li><a href='########## '>HOME</a></li>
<li><a href='##########'>Portfolio</a></li>
<li><a href='##########'>News</a></li>
<li><a href='##########'>Blog</a></li>
<li><a href='########## '>About</a></li>
<li><a href='##########'>Contact</a></li>
</ul>
</div>
</div>
</div>
</div>


How to Add this Widget in to a Website

01. Just go to Your HTML File
02. Now copy the below code and paste it between <body></body>
03. Now Save your template, And you can all don.


<style>
#exenav-left{float:left; display:inline; width:100%; padding-left:2px; padding-top:5px}
#exenav{clear:both; margin:0 auto}
#exenav ul{position:relative; overflow:hidden; padding:0; margin:0; font-family:Arial,Helvetica,sans-serif; font-weight:bold; font-size:12px}
#exenav li{cursor:pointer; float:left; margin:0 1px 0 0; padding:0 1px 0 0; height:40px; display:inline;}
#exenav ul li a, #exenav ul li a:visited{text-decoration:none;border:0px solid #000000; margin:0 1px 0 0; float:left; padding:8px 9px; color:#fff; font-weight:bold; font-size:12px;margin-top:-2px; background:#333333; border-radius:4px 4px; -moz-border-radius:4px 4px 0 0; -khtml-border-radius:4px 4px 0 0; -webkit-border-radius:4px 4px 0 0; border-radius:4px 4px 0 0}
#exenav ul li a:hover{border:2px solid #111; background:#3399FF top left repeat-x; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav ul li a.current, #exenav ul li a.current:visited,
a:hover {text-decoration:none;} a img {border-width:0;}
#hb{height:40px;margin-bottom:10px; margin-top:50px; background:#333333; border-radius:8px 8px; -moz-border-radius:8px 8px 8px 8px; -khtml-border-radius:8px 8px 8px 8px; -webkit-border-radius:8px 8px 8px 8px; border-radius:8px 8px 8px 8px}
#exenav-element{width:100%; margin-top:-24px; padding:0}
</style>
<div id='hb'>
<div id='exenav-element'>
<div id='exenav-left'>
<div id='exenav'>
<ul>
<li><a href='########## '>HOME</a></li>
<li><a href='##########'>Portfolio</a></li>
<li><a href='##########'>News</a></li>
<li><a href='##########'>Blog</a></li>
<li><a href='########## '>About</a></li>
<li><a href='##########'>Contact</a></li>
</ul>
</div>
</div>
</div>
</div>


How to Customize it

01. Change All Red with Your Text!
02. Change All Blue with your links
03. Now save your template and you can all done.

2 comments

  1. The post is really great I really like this website

    ReplyDelete
  2. Well Thanks for given your feed back. Thanks!!!!!

    ReplyDelete