UrduBloggingHub | Informatvie Blog About SEO & Blogging: How To Add CSS 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 pure CSS only. It is very easy to customize this menu according to the color scheme of your blog by using a color code generator tool. 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.

Add DropDown Menu with Social Icons to Blogger:

Step 1: Login to your blogger dashboard and select your blog.
Step 2: Select Edit Template tab.
Step 3: In the template code find </header>

Step 4: Paste following code just below it and save the template.

Code For DropDown Menu:

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

Customizing this DropMenu:

1. In the above code replace # symbols with your links and replace all red colored code with your social network addresses.

2. Replace #f84242; with any other background color of your choice.

3. Replace rgba(197,52,52,1); to change hover color.

Need Help:

We hope this tutorial helps you further decorate your blogs like never before and create beautiful widgets that may engage your readers even more. Let us know if you need any help via comment section below or make a tweet to @MrAbdullahMalik. Peace and blessings buddies. :)