Cara Membuat Menu Dropdown Versi 2

• Silahkan masuk ke dasbor blog anda.

1. Klik panah kebawah seperti pada gambar yang diberi kotak merah :

• Kemudian Pilih >> Template

• Dilanjutkan dengan klik >> Edit HTML >> Proceed / lanjutkan
• Setelah masuk ke jendela Edit Html kemudian silahkan cari kode ]]></b:skin> dengan cara klik  Ctrl + F pada keyboard Komputer anda kemudian masukkan kode tersebut.
• Setelah ketemu silahkan pasang kode berikut ini tepat diatas kode 

/* Firts CSS Menu Horizontal Dropdown 1 - 2----------------------------------------------- */ #menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Pji-LwPJPoa-aKliLJRiT8qVht8LVmdqruPSQ_zOPvQMcqbk8Qos6I0hINbGOyUYrmPCufK9J_koPF2BsR-tq4aMpRpXhRPBGdmXljJypwonPSVXmTXe6hlSZJBTiiDCr4Z8htkdsP0/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto} #menuwrapper{width:960px;height:35px;margin:0 auto} .menusearch{width:300px;float:right;margin:0 auto;padding:0 auto} .clearit{clear:both;height:0;line-height:0.0;font-size:0} #menubar{width:100%} #menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0} #menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px} #menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHHAhQgyd-2YrTxjqqMgQ1_heyBl79MqIkcYc_7V84qfHOkyVpoY8x00VN7aN4RTwbH-xWBCfnIvRIDhUJVPQQt4Ll7B6LQAO8fkNn1In04p5uEKUF4Xnnw7GBJV2jMQGLW-GQfVB6SzE/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px} #menubar li{float:left;position:static;width:auto} #menubar li ul,#menubar ul li{width:170px} #menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px} #menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)} #menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A} #menubar li:hover ul,#menubar li.hvr ul{display:block} #menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none} #menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0} #menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none} /* End CSS Kode Menu Horizontal Dropdown 1-2 ----------------------------------------------- */

• Kemudian silahkan sobat cari kode berikut : 

<header>  : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog

• Pasang kode berikut tepat di atas kode <header> jika sobat blogger ingin memasang menu diatas header, atau di bawah kode </header> Jika sobat blogger ingin memasang dibawah header.

<!-- Kode Tambahan untuk Menu Horizontal Dropdown 2-2 --> <div id='menuwrapperpic'> <div id='menuwrapper'> <ul id='menubar'> <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmfidu2cZJ41thgPL5YCA71yh4YTFVMYBETW4RkfhxSBDmcLDTeF9ux7TpEJi7nMZj0SrpizBY_XUsE1g0xTBq5tlWy1Yp77u8mGiQo54df-Keq1H6OzylhATqghv5XfgLJvZadJhDJp4/s1600/home_white.png' style='padding:0px;'/> Home</a></li> <li><a href='http://www.blogger.com/profile/06961337061354681028' target='new'>Tentang Admin</a></li> <li><a class='trigger'>Contact Us</a> <ul> https://plus.google.com/u/0/118261794464089231656/posts <li><a href='https://plus.google.com/u/0/106997202037581570725' target='new'>Goggle +</a></li> <li class='hr'/> <li><a href='http://twitter.com/Twitter Anda' target='new'>Contact on Twitter</a></li> <li><a href='http://www.facebook.com/Facebook anda' target='new'> Facebook</a></li> </ul> </li> <li><a href='URL BLOG' target='new'>Nama Menu</a></li> <li><a class='trigger'>Nama Menu</a> <ul> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> </ul> </li> <li><a class='trigger'>Nama Menu</a> <ul> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> <li class='hr'/> <li><a href='URL BLOG'>Nama Sub Menu</a></li> </ul> </li> </ul> <div class='menusearch'> <div style='float:right;padding:8px 8px 0 0;'> <form action='URL BLOG/search' method='get' target=''> <input name='sitesearch' style='display:none;' value='URL BLOG'/> <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:italic 12px Georgia;color:#666; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirEjKMSiC67mG65YfKHo2xIix86lr-ppJJ3KPe6tN_zn9c-cHwLX56GAg1vlXNMoMLbABLjzttW5aZL_Bg6or2JXlar9kXU_OJ1_LDMuydd3WU7LLD9GBZ_nJI7S-N2unjmJVBjbdqSXg/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini ya sob...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqEXDzWsSXNaAPsJP_yaS3CnszuXLR-kBfwJVcm9oHN7e2hyphenhyphenfJVuDjSA3-rENTDq3IJfhIHafestYni2gD0zlfbIkTBEPgtXxjVDyeCFHrGemTlf0JfScoK4sRZEBaAwUmbUPvXtc-Z8Y/s1600/bg_search.gif' type='image' value='Search'/> </form></div></div><br class='clearit'/></div><div style='clear:both;'/></div> <!-- End Kode Tambahan untuk Menu Horizontal Dropdown 2-2 -->

 Demikian penjelasan saya tentang Cara Membuat Menu Dropdown Versi 2.  Semoga artikel ini dapat membantu anda memahami blog yang anda gunakan sebagai media informasi bersama. terimakasih atas kunjungannya.

Sumber Artikel : .waroenkblog.com