Making dropdown a menu bar and Setting at Blogger

If you are a new blogger, you very well know the necessity of Drop Down menu in blog or Website. It gives you more flexibility to use your site to you and to the users. Again it is seo friendly too. If you find drop down menu in internet, you probably see they are made with Javascript that make you site slow. Making drop down menu with Javascript is not seo friendly. It may looks too much attractive but it can make slow the loading speed of your site. Dear visitors today I'll give a simple but stylish drop down menu format to you. Personally I use it and it is too much light as it is made with CSS and HTML. It will never slow the loading speed of your site. To add this Drop down menu, you need to have some HTML and CSS knowledge so that you can edit it according to your need. So without passing time, let's start the process. In this stage as we'll make an experiment over our Blogger Template area, so keep back up of your whole template so that you can restore it if any occurrence happens. Now start...

• Select Template from your Blogger dashboard.
• After keeping back up of your whole template, now click on Edit HTML to open the code editor. box.
• Click inside the code editor box and press Ctrl+F to find out specific code.
• Now the copy following code and paste it into the search box.

 
<div class='content-outer'>

Now copy the whole HTML code from the code highlighter bellow and past it just bellow the above code.

<div id='cssmenu'>
<ul>
   <li class='active'><a href='http://www.yoursitehomepage.com'><span>Home</span></a></li>
   <li class='has-sub'><a href='#'><span>Online Income</span></a>
      <ul>
         <li><a href='http://amiodhara.blogspot.com/search/label/Tips%20and%20Informations'><span>Tips and Informations</span></a></li>
         <li class='last'><a href='http://www.freelancer.com'><span>Freelancer</span></a></li>
         <li class='last'><a href='http://www.odesk.com'><span>Odesk</span></a></li>
         <li class='last'><a href='http://www.microworkers.com'><span>Microworkers</span></a></li>
         <li class='last'><a href='http://www.shareyt.com'><span>Shareyt</span></a></li>
      </ul>
   </li>
<li class='has-sub'><a href='#'><span>E-Book Downloads</span></a>
      <ul>
         <li class='last'><a href='http://amiodhara.blogspot.com/search/label/Outsourcing and Freelancing Books'><span>Freelancing</span></a></li>
         <li class='last'><a href='http://amiodhara.blogspot.com/search/label/Forex Books'><span>Forex Books</span></a></li>
         <li class='last'><a href='http://amiodhara.blogspot.com/search/label/Wordpress book'><span>Wordpress book</span></a></li>  
      </ul>
   </li>
<li class='has-sub'><a href='#'><span>Important Web Address</span></a>
      <ul>
         <li><a href='http://www.abohomanbangla.com'><span>Abohoman Bangla</span></a></li>
         <li class='last'><a href='http://www.techtunes.com.bd'><span>Techtunes</span></a></li>
         <li class='last'><a href='http://www.w3schools.com'><span>W3 Schools</span></a></li>
         <li class='last'><a href='http://www.filecrop.com'><span>File Crop</span></a></li>
         <li class='last'><a href='http://www.pchelplinebd.com'><span>Pc Helpline</span></a></li>
      </ul>
   </li>
<li class='has-sub'><a href='#'><span>Tutorials</span></a>
      <ul>
         <li class='last'><a href='http://amiodhara.blogspot.com/search/label/HTML'><span>HTML Language</span></a></li>
         <li class='last'><a href='http://amiodhara.blogspot.com/search/label/CSS'><span>CSS</span></a></li>
         <li class='last'><a href='http://amiodhara.blogspot.com/search/label/JAVA Script'><span>JAVA Script</span></a></li>
      </ul>
   </li>
   <li><a href='http://amiodhara.blogspot.com/search/label/Blogger'><span>Blogger</span></a></li>
  <li><a href='http://webdesign2seomaster.blogspot.com/p/my-personal-profile.html'>
<span>About Me</span></a></li>
   <li class='last'><a href='http://webdesign2seomaster.blogspot.com/p/me.html'>Contact Me</a></li>
</ul>
</div>

Now the second step begins. Now find the bellow code in the same process stated above.

</b:skin>

Now just copy the bellow codes and paste them just before the above the code.

#cssmenu{ height:45px; display:block; padding:0; margin:0;  border:1px solid; border-radius:5px; } 
#cssmenu > ul {list-style:inside none; padding:0; margin:0;} 
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;} 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 13px/100% Arial, Helvetica, sans-serif; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); } 
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;} 
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; } 
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;} 
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; } 
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;} 
#cssmenu ul li.has-sub:hover > a{ background:#1D548C; border-color:#1D548C; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999; } 
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block;} 
#cssmenu ul li.has-sub > a:hover{background:#1D548C; border-color:#1D548C;} 
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#1D548C; border-radius:0 0 5px 5px; z-index:999; } 
#cssmenu ul li > ul{width:200px;} 
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;} 
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:10pt Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); } 
#cssmenu, #cssmenu > ul > li > ul > li a:hover{ background:#1D548C; background:-moz-linear-gradient(top, #4fbdf0 0%, #45b2d2 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#4fbdf0), color-stop(100%,#45b2d2)); background:-webkit-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:-o-linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); background:-ms-linear-gradient(top, #4fbdf0 0%,#45b2d2 100%); background:linear-gradient(top,  #4fbdf0 0%,#45b2d2 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4fbdf0', endColorstr='#45b2d2',GradientType=0); } 
#cssmenu {
border-color: #3589a1;
margin-bottom: 5px;
} 
#cssmenu > ul > li > a{border-right:1px solid #3589a1; color:#fff;} 
#cssmenu > ul > li > a:after{border-color:#6ed1ff;} 
#cssmenu > ul > li > a:hover{background:#36acd2;}]]>

Now click on Save Template and done!  See the preview. You have successfully added the CSS drop down menu in your site. Now just edit the codes with your links that you want to build up. If feel any difficulties, please inform me through comments. I will help you. Take care and good bye!