Drop Down Menu The best one ever

Generally In many of the blogs we can see a bubble like comment counter to display the number of comment made in that post by the readers or visitors which will also encourage the visitors to comment on your blog and also help to highlight the credibility of your articles.

In this blog post I am going to share my trick about installing the comment counter on your blog.You can see the lime demo of the comment counter on my blog.To add the comment counter in your blog,just follow the steps given below which will help you to install fully clickable comments counter button on the same line as post title in blogger.This comment counter is right aligned by default.(If you wish to make it Left aligned just change red marked Right with left in Css Portion)

The following steps will insert a fully clickable comments counter button on the same line as the post title in Blogger. The comments counter is right aligned by default.

1.   Sign in to blogger

2.   Go to design>Edit HTML

3.   Find the given tag (press ctrl + F to open the find box and copy the code to find box for quick finding)

  ]]></b:skin>

    4.Above that code copy the given code

#menuwrapper{height:30px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGPoLnr22FUZQyxkBEhv5qdCaCmQEviZgwLULe7MlO2hjwibp58As2HAjE1RCF9g5Vl5dsmjWUIK9IhTqS89dGxAIIfrl32TUxmuVuPeCJe2XLWGGM7fOjYZc6-fqMiwp9qqqDP3tsTekY/s1600/menutop-bar.png) repeat-x;width:1025px;overflow:hidden;margin:0 auto;padding:0 auto}

.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:960px;float:left}
#menubar,#menubar ul{list-style:none;font-family:Arial;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:13px;font-weight:700;color:#fff;padding:7px 12px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqiNUiTEgGlW-Dzp0sEfuQ5SFkDeFh5Yr0YEdCRNNIYcgKCuTdUc463AuHHt7NnpvpyKkgfycyKO1IRvLV_RSb_Q_uhuf-dVvPj2KdepiIRfdj_f3LP_Bt7B9bQQVIdDdoQtlovSBkUbU/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:120px}
#menubar ul li a{text-align:left;color:#000;font-size:13px;font-weight:400;font-family:Arial;border:none;line-height:1.2em;border-bottom:dotted 1px #999;margin:0 8px;padding:6px 0}
#menubar li ul{border:solid 1px #999;margin-left:-3px;background:#fff;z-index:100;position:absolute;display:none;padding-bottom:12px;box-shadow:0 5px 30px 5px #666;-moz-box-shadow:0 5px 30px 5px #666;-webkit-box-shadow:0 5px 30px 5px #666;filter:progid:DXImageTransform.Microsoft.Shadow(color='#666666',Direction=125,Strength=6);-moz-border-radius-bottomleft:6px;-moz-border-radius-bottomright:6px;-webkit-border-bottom-left-radius:6px;-webkit-border-bottom-right-radius:6px;border-bottom-left-radius:6px;border-bottom-right-radius:6px;border-width:0 2px 2px}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#380B61;color:#fff;text-decoration:none;-moz-transition:color .25s linear;-webkit-transition:color .25s linear;transition:color .25s linear}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#000;background-color:transparent;text-decoration:none}
#menubar ul a:hover{background-color:transparent!important;color:#000!important;text-decoration:underline!important}
#menubar li.home a,#menubar li.home a:visited{background:none}
#menubar li.nav1 a:hover{background:#099}
#menubar li.nav2 a:hover{background:#DBA901}
#menubar li.nav4 a:hover{background:#610B5E}
#menubar li.nav5 a:hover{background:#48F87D}
#menubar li.nav6 a:hover{background:#0EFAE7}
#menubar li.nav7 a:hover{background:#F8E348}
#menubar li.nav8 a:hover{background:#F548F8}
img.label_thumb{float:left;border:1px solid #8f8f8f;background:#D2D0D0;margin-right:10px;height:60px;width:60px;padding:2px}
img.label_thumb:hover{background:#f7f6f6}
.label_with_thumbs{float:left;width:100%;min-height:70px;margin:0 5px 2px 0}
ul.label_with_thumbs li{min-height:65px;margin:2px 0;padding:4px 0}
.menubottompic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1izyGMdqctt462eeU05ykAfzZb2hXlMd5qEcI_-uG03r4mTrgXjvQNv5baSu6wUCTXvIl0hxml4Uckk7B20ex4CDwO0vxvwAy_UfZ-o_sycmoCTgs0UFcRuZ3udAxXYW48l_WbH0voPg/s1600/bottommenu.png) repeat-x top left;width:960px;height:42px;border-top:8px solid #e4e4e4;border-bottom:1px solid #A6A6A6;margin:0 auto;padding:0 auto}
.menubottom{width:630px;float:left;height:20px;margin:0 auto;padding:14px 0}
.menubottom ul{padding-left:0;color:#fff;list-Fwistyle-type:none;font:bold 12px Arial,sans-serif;text-shadow:0 1px 0 #000;margin:0}
.menubottom li a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ-IEOxuy5dIyYP7PHk2idF5XlnH1Gklo7bHemqxlcboNoLG-8CUNkpe9CRvKDOEgJNKJ8YAGbN6dAxKT0P8RM1Gz0ohCTJUAVwAKQYYc58otvFuverUu4sjvKkWAE8hQfEbzIizkT6W4/s1600/horiz-menu-div.png) no-repeat center right;float:left;display:block;color:#F2F2F2;line-height:1.2em;padding:3px 8px}
.menubottom li a:visited{color:#F2F2F2}
.menubottom li a:hover{color:#FACD49;text-decoration:none}
.menupic2{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWPbeaxDeMJQ1Mwv8wv-3qC3Feic9JLdR1US0w2UIhfHCU7Idb9e-6jez1aoB1Pe6mGEQ3p6SpOqiLTzKo3c2MXet8msaPYHxcDL4yyClEp7HQQj__D5JRI_axXYwonv-oICSCFW5YyF6C/s1600/top-bar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
.menuhorisontal2{width:960px;height:24px;margin:0 auto;padding:3px 0}
.menuhorisontal2 ul{padding-left:7px;color:#666;text-transform:capitalize;list-style-type:none;font:normal 12px Arial, Helvetica,Verdana,sans-serif;margin:0}
.menuhorisontal2 li a{float:left;display:block;text-decoration:none;border-right:0 solid #415770;font-weight:700;color:#fff;padding:3px 6px 4px}
.menuhorisontal2 li a:visited{color:#fff}
.menuhorisontal2 li a:hover{background:#e4e4e4;border-radius:3px;-webkit-border-radius:3px;-opera-border-radius:3px;-moz-border-radius:3px;color:#000;text-decoration:none}
.newspic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlYwvwfDIiIywZgqtMhMzGSkJ64O-T8SBCUgpr9WRSOogB7S-NzGjI1Unf30IdQrd-zQHF1DJOgDdZRe3xDptcsTJnkQxAnt-D_m_Lfhi3f4Mg0xFhpEWqwOAjX9j9yylBtYN73voyYdVz/s1600/bottomtop-bg.jpg) repeat-x;width:960px;height:28px;border-bottom:8px solid #e4e4e4;margin:0 auto;padding:0 auto}
.news{width:960px;line-height:1.4em;text-align:left;font-family:Arial;font-size:11px;color:#5D5C5C;overflow:hidden;clear:both;margin:0 auto;padding:0 auto}
.news a:link,.news a:visited{color:#fff;text-decoration:none}
.news a:hover{color:#eace12;text-decoration:underline}
.showpageOf{border:1px solid #7b7c7d;color:#000;margin:2px;padding:2px 5px}
.showpageNum a,.showpage a{border:1px solid #7b7c7d;color:#000;text-decoration:none;margin:2px;padding:2px 5px}
.showpageNum a:hover,.showpage a:hover,.showpagePoint{border:1px solid #949493;background:#ee6201;color:#fff;margin:2px;padding:2px 5px}
#featured{margin-bottom:8px}
.sliderwrapper{position:relative;overflow:hidden;height:250px}
.sliderwrapper .contentdiv{visibility:hidden;position:absolute;left:0;top:0;height:100%;padding:0}
.pagination{text-align:right;padding:8px 0}
.pagination a{font-size:11px;color:#fff;background:#e95e00;padding:3px 6px}
.pagination a:hover,.pagination a.selected{color:#dedde5;background-color:#535352}
.featuredPost{width:410px;background:#191919;filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;color:#dedde5;position:absolute;bottom:0;padding:10px 10px 0}
.featuredPost a{color:#e95e00}
.featuredPost a:hover{color:#dedde5}
.featuredPost h2{font-size:12px;line-height:1;margin:0}
.featuredPost span{font-size:10px}
.featuredPost p{font-size:11px}
.mainbottom h2,.sidebar h2,.sidebarright h2{font:bold 13px Arial;text-transform:none;color:#000;line-height:1.2em;letter-spacing:.01em;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4zzHQqwcQKnLC1QhLiSRCtYwwkA-S8AI8DrxettVq-1GCCd1BCpUgl1LbNcZdqQybKvErjALEd-vQUYo_B80QWT8OgxEcZ_7HyhyphenhyphenLdeFvER94WjqGmrH0Rm-k_j3lv2-n1UbYiGttl3U/s1600/midle2_h2.gif) repeat-x;border:1px solid #ccc;border-width:0 0 1px;margin:0 auto;padding:6px 10px}
.mainbottom .widget,.sidebar .widget,.sidebarright .widget{background:#fff;border:1px solid $bordercolor;margin:0 0 8px;padding:0 auto}
.mainbottom a:link,.mainbottom a:visited,.sidebar a:link,.sidebar a:visited,.sidebarright a:link,.sidebarright a:visited{font:12px Arial;color:#16387c;text-decoration:none}
.mainbottom .widget-content,.sidebar .widget-content,.sidebarright .widget-content{margin:0 auto;padding:8px 9px}
.mainbottom,.sidebar,.sidebarright{font:normal 12px Arial;color:#555;line-height:1.4em}
.mainbottom li,.sidebar li,.sidebarright li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVywocT6EzubKuQW2eJVUG5_5pVvl00L92_JixdQ9mSlWuYFMg6QDB6cBdhvnW7h60RK2GryPk_xcPDDRfOE02gexYpsxtquTqWVuhArOyglTK_zUyAmHRDj5M1pIkCgWZ8R4SnG_Kr4Y/s1600/arrow_bg.GIF) no-repeat 3px 9px;border-bottom:1px dotted #ccc;text-indent:0;line-height:1.4em;margin:0;padding:3px 0 4px 20px}
.mainbottom a:hover,.sidebar a:hover,.sidebarright a:hover{color:#F60}
.mainbottom ul,.sidebar ul,.sidebarright ul{list-style:none;margin:0;padding:0}
#comments-block .comment-author,.profile-datablock{margin:.5em 0}
#menubar li.home a:hover,#menubar li.nav3 a:hover{background:#610B0B}
#menubar li.close a,#menubar li.close a:visited,#menubar li.close a:hover{border-right:none}
.bottomsearch,.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}

.menubottom li,.menuhorisontal2 li{display:inline;margin:0}

                               Now

1. Go To Blogger > Design
2. Click choose a gadget
3. Select HTML/javascript widget
4. Paste the following code inside it  

</div>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5KvnXtf5TQXiCr61Xi6_FuCaKkKA_m5Y75ERGhMqulJ76ymVdJ3eKTJzE0wR3IhxxGaxoUzUdDt75Sp8eo5ClAotBUiOBUc9Bf4x1Rb3CFCk06UMQgqyulOoSnUlWlQjcKrTmosvFQRc/s1600/home_white.png' style='padding:0px;'/></a></li>
<li class='nav1'><a href='#'>About</a></li>
<li class='nav2'><a class='trigger' href='#'>Contact</a>
<ul>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Twitter</a></li>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Email</a></li>
<li><a href='#'>Blogger</a></li>

<li><a href='#'>Kompasiana</a></li>
</ul>
</li>
<li class='nav3'><a class='trigger' href='#'>Adventure Activities</a>
<ul>
<li><a href='#'>All Trekking</a></li>
<li><a href='#'>Mountain Everest</a></li>
<li><a href='#'>Annapurna Round Trek </a></li>
<li><a href='#'>Dhoulagiri Round Trek</a></li>
<li><a href='#'>Langtang, Gosaikunda Trek</a></li>
<li><a href='#'>Gokyo, Chola Pass Trek</a></li>
<li><a href='#'>Helambu Vally Trek</a></li>
<li><a href='#'>Image</a></li>
<li><a href='#'>Image</a></li>
<li><a href='#'>More</a></li>
</ul>
</li>
<li class='nav4'><a href='http://creatingwebsite-maskolis.blogspot.com/2011/12/johny-portal-template-untuk-situs.html'>Template Updates</a></li>
<li class='nav5'><a href='#'>Health</a></li>
<li class='nav6'><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='http://dineshtamang.blogspot.com/search/label/Nepali Movie'>Nepali Movie</a></li>
<li><a href='#'>Hindi Movie</a></li>
<li><a href='#'>English Movie</a></li>
<li><a href='#'>Tome and Jerry</a></li>
<li><a href='#'>Music</a></li>
<li><a href='http://dineshtamang.blogspot.com/2012/04/nepali-english-and-indian-tv-chanels.html'>Television</a></li>
<li><a href='#'>Jokes</a></li>
</ul></li>
<li class='nav7'><a href='#'>Tech</a></li>
<li class='nav8'><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li><a href='#'>Tutorial</a></li>
<li><a href='#'>Resource</a></li>
<li><a href='#'>Advertise</a></li>
<li><a href='#'>CSS</a></li>
<li><a href='#'>HTML</a></li>
</ul>
</li>
</ul>

NOW Save
you are done