Add top floating navigation menu to blogger

Unknown
Floating widgets for blogs are very popular these days. Today we talk about similar type of navigation menu for blogger. This is not an ordinary navigation menu it is floating navigation menu means it sits at the top of the blog header and remains there whether you scroll the page up or down.It is very easy to use this menu because it remains always at the top  there is no need to scroll up the page and find the menu. Another important feature of this menu is that it contains Social subscriptions icons inbuilt with it. These Social icons will help you in increasing subscribers for your blog.This guide is about adding this exciting floating navigation menu with social icons to blogger blogs.

Add floating navigation menu to blogger



Adding floating navigation menu to blogger:

  • Open your blogger dashboard.
  • Select your blog.
  • Click on Template option.
  • In the template code find  </head>
  • Just below it paste the following code and save the template.
  • View your blog for the new changes.
NOTE : In the following Code change our social network addresses with your own addresses.

Code:

<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='data:blog.homepageUrl'>Home</a></li>
         
           <li><a href='http://www.windroidclub.com/wctopsoc/label/Make%20money'>Make Money</a>
              
           </li>
           
           
             <li><a href='http://www.windroidclub.com/p/contact-us_13.html'>Contact us</a>           
           </li>
         </ul>
      </div>

      <div id='wctopsoc'>
         
<a href='http://feeds.feedburner.com/WindroidClubblog' 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/Windroidclub/416958881706592' 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/windroidclub' 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/105802694845534710685' target='_blank'><img alt='Add to Circles' src='http://1.bp.blogspot.com/-YWI0K2Ebh2Q/UR3tVS1gDhI/AAAAAAAABLk/8hYaD0Yur_k/s1600/gpp.png'/></a>

      </div>
   </div>


Instructions -
1. For changing background color of the menu change background:#111111; with your own value.
2. For changing color on mouse hover on the link change background:#00d1f8; with your own value.
If you enjoyed this article, you might also like..

Followers