Add dropdown menu with social icons to blogger

Today we will discuss about adding an attractive dropdown navigation menu with social icons to your blogger blog. This navigation menu is created in pureCSS only. It is very easy to customize this menu according to the color scheme of your blog. Dropdown list in this menu is a plus point because it helps in managing more number of links as compare to normal horizontal menu. You can easily add this dropdown navigation menu to blogger by following our easy guide.
 

Adding navigation menu with social icons to blogger

Step 1: Login to your blogger dashboard and select your blog.
Step 2: Select Template option.
Step 3: In the template code find </header>
Step 4: Paste following code just below it and save the template.

<style>
#wc-soc-nav{
  width:100%;
  height:50px;
  display:block;
  padding:0;
  margin:0 0 22px 0;
background:#f84242;
border-bottom:4px solid rgba(197,52,52,1);
box-shadow:1px 1px 4px  #dcdcdc;
-moz-box-shadow:1px 1px 4px  #dcdcdc;
-web-kit-box-shadow:1px 1px 4px  #dcdcdc;
-goog-ms-box-shadow:1px 1px 4px  #dcdcdc;
}

#wc-soc-menu{
  margin:0 auto;
  display:block;
  padding:0;
font-family: 'georgia', sans-serif;
}

#wc-soc-menu ul{
  float:left;
  margin:0;
  padding:0;

}

#wc-soc-menu li{
  float:left;
  list-style:none;
  line-height:50px;
  margin:0;
  padding:0
}

#wc-soc-menu li a, #wc-soc-menu li a:link{
  color:#f0f0f0;
  display:block;
  margin:0;
  padding:0 10px;
font-size:16px;
  text-decoration:none;

}

#wc-soc-menu li a:hover, #wc-soc-menu li a:active, #wc-soc-menu .current_page_item a  {
  color:#fff;
  padding:0 10px;
}

#wc-soc-menu li li a, #wc-soc-menu li li a:link, #wc-soc-menu li li a:visited{
  font-size: 16px;
background:#f84242;
  color: #fff;
  width: 150px;
  margin: 0;
  padding: 0px 10px;
  line-height:30px;
  position: relative;
  
}

#wc-soc-menu li li a:hover, #wc-soc-menu li li a:active {
  background:rgba(197,52,52,1);

  color: #fff;
}

#wc-soc-menu li ul{
  z-index:9999;
  position:absolute;
  left:-999em;
  height:auto;
  width:168px;
  margin:0px;
  padding:0px
   
}

#wc-soc-menu li:hover ul, #wc-soc-menu li li:hover ul, #wc-soc-menu li li li:hover ul, #wc-soc-menu li.sfhover ul, #topwc-soc-menu li li.sfhover ul, #topwc-soc-menu li li li.sfhover ul{
  left:auto
}

#wc-soc-menu li:hover, #wc-soc-menu li.sfhover{
  position:static

}

#wc-soc-ico img
{
margin-left:-6px;
height:35px;
margin-top:9px;
}
</style>


  <div id='wc-soc-nav'>
     <div id='wc-soc-menu'>
         <ul>
       <li><a href='#'>Home</a></li>
           <li><a href='#'>Projects</a>
               
           </li>
                <li><a href='#'>Services</a></li>
         
           <li><a href='#'>Hire us</a></li>
              
           <li><a href='#'>Dropdown 2 »</a>
               <ul>
                  <li><a href='#'>Blogger</a></li>
                  <li><a href='#'>Templates</a></li>
                  <li><a href='#'>Plugins</a></li>
                  <li><a href='#'>Wordpress </a></li>
                  <li><a href='#'>Themes</a></li>
                  <li><a href='#'>Blogging tips</a></li>
               </ul>
           </li>
             <li><a href='#'>Contact us</a>           
           </li>
          <li id='wc-soc-ico'>
<a href='Your facebook page url' target='_blank'>
<img style='margin-left:50px;' src='http://2.bp.blogspot.com/-iKLppxYoaW0/Uws6PaZJ-yI/AAAAAAAAAHk/5Vp8DWfYXCU/s1600/48x48-Circle-49-FB.png' alt='Facebook' title='Like us on Facebook'/>
</a>
</li>
<li id='wc-soc-ico'>
<a href='Your twitter account url' target='_blank'>
<img src='http://3.bp.blogspot.com/-48EGbQzzsdI/Uws6RmhElvI/AAAAAAAAAIM/4cB8dYeRA1c/s1600/48x48-Circle-49-TW.png' alt='Twitter' title='Follow us on twitter'/>
</a>
</li>
<li id='wc-soc-ico'>
<a href='Your Google Plus url' target='_blank'>
<img src='http://4.bp.blogspot.com/-hyEUL2pEdxo/Uws6PoLa8tI/AAAAAAAAAHo/cPPQeU-XbdE/s1600/48x48-Circle-49-GP.png' alt='Google Plus' title='Follow us on Google plus'/>
</a>
</li>
<li id='wc-soc-ico'>
<a href='Your RSS feed address' target='_blank'>
<img src='http://4.bp.blogspot.com/-6NeaTmA0fxs/Uws6RGbKbnI/AAAAAAAAAIE/X-xp-2uBQ-g/s1600/48x48-Circle-49-RSS.png' alt='RSS' title='Subscribe to our RSS feeds'/>
</a>
</li>

         </ul>
      </div>
   
   </div>