How To Create Dropdown Menus With Social Icons In Your Blog

The menu buttons are the integral part of a blog. They give attractive looks to your blog. In this post, I am discussing how to create drop down menu buttons in your blog with social icons. These buttons are created in CSS and very easy to modify according your wishes. You can easily change the colors of these buttons. These codes also have drop down menus that help you handle more your links with great ease. 

Also read 

How to Add all in one subscription box to blog

How to add these Menus in your blog

• Go to your blogger Dashboard and select your blog 
• Select Template and edit the HTML 
• In code find the </header> 
• Paste following codes just below it. 

<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>

Change the Menu

In the above code replace the '#' with your links and replace green colors with your social media account. Moreover, you can easily modify the background and hover color of your choice. 

Just find and replace it if you desire. 

#f84242; (Background color)
rgba(197,52,52,1) (Hover color)

If you like this post, please share it on social media with your friends.