Menu Drop Down

Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:

1. login akun blog
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>

Masukan kode ini :

/* Menu Horizontal Dropdown ----------------------------------------------- */ #menuwrapperpic{background: url(http://2.bp.blogspot.com/-eVufkC686Cw/TwGo8YAlWwI/AAAAAAAAAYM/tWP7l3ENpjY/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(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/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}

Selanjutnya cari kode berikut:

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

Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>


<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='http://www.archivostraderforex.com.ar/img/other/home2_16.png' style='padding:0px;'/> Home</a></li>
<li><a class='trigger'>Contact Us</a>
<ul>
<li><a href='https://twitter.com/#!/Adeccooo' target='new'>Contact Ade Sapto Saputro on Twitter</a></li>
<li class='hr'/>
<li><a href='http://www.facebook.com/ade.sapto.saputro' target='new'>Contact Ade Sapto Saputro on Facebook</a></li>
<li class='hr'/>
<li><a href='http://www.blogger.com/profile/04097121281392964272' target='new'>Ade Sapto Saputro Profile</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Lounge</a>
<ul>
<li><a href='http://adesaptosaputro.blogspot.com/2012/01/ketergantungan-social-network.html'>Ketergantungan Social Network </a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>Tulisan</a>
<ul>
<li><a href='http://adesaptosaputro.blogspot.com/2012/03/apa-peran-penting-manajemen-bagi.html'>Apa peran penting manajemen bagi kehidupan sehari-hari dan organisasi? </a></li>
<li class='hr'/>
<li><a href='http://adesaptosaputro.blogspot.com/2012/03/membedakan-organisasi-formal-dan.html'>Membedakan Organisasi Formal dan Informal </a></li>
<li class='hr'/>
<li><a href='http://adesaptosaputro.blogspot.com/2012/04/struktur-organisasi.html'>Struktur Organisasi</a></li>
<li class='hr'/>
<li><a href='http://adesaptosaputro.blogspot.com/2012/05/manajemen-motivasi.htmll'>Manajemen Motivasi</a></li>
<li class='hr'/>
<li><a href='http://adesaptosaputro.blogspot.com/2012/05/manajemen-konflik.html'>Manajemen Konflik</a></li>
<li class='hr'/>
</ul>
</li>
<li><a class='trigger'>LABINTDAS</a>
<ul>
<li><a href='http://adesaptosaputro.blogspot.com/2012/05/cara-membuat-chatbox-ym-di-blog.html'>Chat Box </a></li>
<li class='hr'/>
<li><a href='http://adesaptosaputro.blogspot.com/2012/05/menu-drop-down.html'>Menu Drop Down </a></li>
<li class='hr'/>
<li><a href='http://adesaptosaputro.blogspot.com/2012/05/tips-untuk-membuat-alamat-blog.html'>Tips Untuk membuat Alamat Blog Bergerak/Berjalan</a></li>
<li class='hr'/>
<li><a href='http://adesaptosaputro.blogspot.com/2012/05/psan-dan-kesan.html'>Pesan dan Kesan </a></li>
<li class='hr'/>
</ul>
</li>
</ul><div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://adesaptosaputro.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://adesaptosaputro.blogspot.com/'/>
<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(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Silahkan Mencari'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div></div></div>

Keterangan:

1. Kode berwarna merah adalah Url tujuan, silahkan ganti dengan Url pada blog anda.
2. Kode berwarna kuning adalah kalimat yang tampil pada menu dropdown, Silakan anda sesuaikan.