How to add Floating Navigation bar to blogger

Floating widgets for blogs are highly in use currently because one of their main use is to increase blog traffic through social icons. These days we have a tendency to state similar kind of floating navigation bar for blogger. This is often not a normal navigation menu it's floating navigation menu suggests that it sits at the highest position in your blog & remains there whether you scroll the page up or down. Another main feature of this menu is that it contains Social subscriptions icons inherent with it. These Social icons can assist you in increasing subscribers for your site.This guide is regarding adding this exciting floating navigation menu with social icons to blogger blogs.

Steps To Add Floating Navigation bar to blogger:

•     Open Dashboard
•     Click on Template.
•     Choose 'Edit HTML'
•     Find </head> in your template. (You can find the code by Ctrl+F)
•     Just below it paste the subsequent code and save it.

Code to add Floating Navigation bar to blogger:

<style>

#wctopcont{
  width:100%;
  height:40px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#111111;
 z-index:100;
  top:0px;
left:0px;
 position:fixed;
    box-shadow:2px 2px 5px  #444444;
-moz-box-box-shadow:2px 2px 5px  #444444;
-web-kit-box-shadow:2px 2px 5px  #444444;
-goog-ms-box-shadow:2px 2px 5px  #444444;
}

#wctopnav{
  float:left;
  width:700px;
  height:40px;
  display:block;
  padding:0;
  margin-left:40px;
}

#wctopnav ul{
  float:left;
  margin:0;
  padding:0;

}

#wctopnav li{
  float:left;
  list-style:none;
  line-height:40px;
  margin:0;
  padding:0
}

#wctopnav li a, #wctopnav li a:link{
  color:#fff;
  display:block;
  margin:0;
font:16px georgia, verdana;
  padding:10px;
  text-decoration:none;
}

#wctopnav li a:hover, #wctopnav li a:active, #wctopnav .current_page_item a  {
  color:#fff;
  padding:10px;
background:#00d1f8;
border-bottom-right-radius:10px;
border-bottom-left-radius:10px;
}

#wctopsoc {
  float:right;
  width:220px;
  padding:0px 0px ;
  margin:9px 10px 0px 0px;
  .margin:8px 10px 0px 0px;
  
}
#wctopsoc img
{
margin-left:5px;
margin-top:-2px;
height:26px;
border:none;
}

</style>

  <div id='wctopcont'>
     <div id='wctopnav'>
         <ul>
           <li><a href='#'>Home</a></li>
         
           <li><a href='http://www.atoznewsbuzz.com'>Visit Us</a>
              
           </li>
           
           
             <li><a href='http://www.atoznewsbuzz.com/p/contact-us.html'>Contact us</a>           
           </li>
         </ul>
      </div>

      <div id='wctopsoc'>
         
<a href='http://feeds.feedburner.com/AtoZNewsBuzz' target='_blank'><img alt='Subcribe to our RSS feeds' src='http://2.bp.blogspot.com/-ea9ILzszTF0/UR3ySvlxd0I/AAAAAAAABMQ/4QBrWHbt0FU/s1600/feed.png'/></a>
<a href='http://www.facebook.com/pages/atoznewsbuzz' target='_blank'><img alt='Join Us on Facebook' src='http://1.bp.blogspot.com/-3wW_EmAR24w/UR3tVFL5fFI/AAAAAAAABLc/RMS76XM5sK8/s1600/fbb.png'/></a>
<a href='https://twitter.com/prasanth402' target='_blank'><img alt='Follow us on Twitter' src='http://1.bp.blogspot.com/-wSCdvgK8Ctw/UR3tWusvgyI/AAAAAAAABL0/FY3nUvdlJx0/s1600/tww.png'/></a>
<a href='https://plus.google.com/+prasanthbalanagu' target='_blank'><img alt='Add to Circles' src='http://1.bp.blogspot.com/-YWI0K2Ebh2Q/UR3tVS1gDhI/AAAAAAAABLk/8hYaD0Yur_k/s1600/gpp.png'/></a>

      </div>
   </div>

Note: To change Background Color of floating navigation bar by replacing background:#111111 with your required value.

 For changing mouse Hover effect color change background:#00d1f8; with your required value.