Monday, June 18, 2012

Simple and Cool Header Navigation Menu

Simple Header Menu in BloggerWe are back with some new and awesome cool widget for your blog. Today i am sharing a important navigation widget called Header Menu with you. You know it very well, Header Navigation Menu is very important role in any blog or website. It does not only attract your visitor but also decrease your blog bounce rate. With the help of Header Menu, people can easily navigate in your blog without any problem. You have seen many navigation menus but most of them are good as you want so i here, i tried my best to create a awesome and cool header Navigation menu with hover efforts. Its is very less is size so that it does not increase your blog loading time. To add this widget in your blog follow these simple steps.



Features of this widget

  • Simple and Cool 
  • Very Light weight in coding 
  • Easily load
  • Hover efforts to show the current location 

How to add Header Menu in Blogger Blog

  1. Go to Blogger -> Design -> Page Element
  2. Add a Gadget Below Header 
  3. Choose HTML/JavaScript Gadget
  4. Paste the Following Code in Gadget
 <style type="text/css">
.pbt_navcontainer {
-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;
background: #232627;
width: 960px; height: 40px; font-size: 12px;margin: 0px auto; padding: 0px 10px; padding-top:0px;
}
}
#pbt_nav {
list-style-type:none;
margin:0;
padding-top:0;
height: 40px;
overflow: hidden;
float:left;
}
#pbt_nav ul {
float:left;
list-style-type:none;
padding:0;
}
#pbt_nav li {
float:left;
list-style-type:none;
margin:0;
padding-right: 5px;
padding-top: 7px;
}
#pbt_nav ul li {
list-style-type:none;
margin:0;
padding:0;
}
#pbt_nav li a:link, #pbt_nav li a:visited {
-moz-border-radius:5px 5px 5px 5px;
-khtml-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
color: #fff;
text-decoration: none;
text-transform: capitalize;
font:14px Verdana, Arial, Helvetica, sans-serif;
letter-spacing:-0.1px;
font-weight: bold;
display: block;
padding: 4px 14px;
}
#pbt_nav li a:hover, #pbt_nav li a:active {
background:#FCFAFA;;
color:#070606 ;
text-decoration:none;
}
#pbt_nav  li.current-cat a {
background:#FCFAFA;
color: #070606;
text-decoration:none;
}
</style>
<div class='pbt_navcontainer'>
<ul id='pbt_nav' style="margin-left: -25px;">
<li><a href='http://www.probloggingtools.com/'>Home</a></li>
<li><a href='http://www.probloggingtools.com/2012/04/add-cool-email-subscription-box-below.html' rel='dofollow'>Blogger</a></li>
<li><a href='http://www.probloggingtools.com/2012/03/attractive-subscription-box-widget-for.html' rel='dofollow'>Articles</a></li>
<li><a href='http://www.probloggingtools.com/2012/03/techcrunch-social-sharing-widget.html' rel='dofollow'>Tutorials</a></li>
<li><a href='#' rel='dofollow'>News</a></li>
<li><a href='#' rel='dofollow'>Widgets</a></li>
<li><a href='#' rel='dofollow'>Google+</a></li>
<li><a href='#' rel='dofollow'>Computer</a></li>
<li><a href='#' rel='dofollow'>Websites</a></li>
</ul>
   5.  Change the Hyperlinks of Menu labels/ Category
   6.  Save this widget and Drag this to your header menu.
   7.  Remove the previous header menu widget, if any one.

Further Customization

You can further customize it according to your need and choice. Like change the width of header menu to change width: 960px. You can also change font and size as in bold lines.
To find out a best color for your header menu, you can visit Hexcolor.

Credit

Simple Header Navigation Menu is fully designed by PBT. If you want to share this widget with you readers, you have to give a backlink to PBT.

Need Help??

If you having any trouble to  implement Header Navigation Menu widget in your blog. Let me know via Comment.

0 comments :

confused??? Post a Comment

 

Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...