Cara membuat menu drop down di blogspot

Salam blogger untuk semua penggiat blog di seantero nusantara dan sejagat raya, kali ini saya akan menjelaskan cara memasang menu drop down pada blog yang mungkin artikel ini sudah ada yang buat sebelumnya, namun tidak ada salahnya bila saya mengupas kembali dengan alasan kita mencoba berbagi agar ilmu kita kita dapat lebih bermanfaat untuk semua.

Menu drop down berfungsi bagi anda yang memiliki beberapa menu yang telah dikategorikan didalamnya sehingga tidak mungkin untuk dapat ditampilkan sepenuhnya pada posisi horizontal maupun vertikal. Langsung saja kita Ke TKP ...


1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin>
5. letakkan kode berikut tepat di atas kode ]]></b:skin> sebagai kode css nya.

/* Menu Horizontal Dropdown ----------------------------------------------- */

#menuwrapperpic
{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifb55q08kkWu9qRz6w6EH5stFGjrj6UOYsFmEmICfxBM58ZHPzpWwJhgYum5xGNywIhwtgorLzBK9vdGCq-Zvl6VOjoZeXZe1hiEGvKUZDNpVx2fUOwnT1HzmYBmB5cvwKjbQtfsNE4Rc/s1600/oke.jpg) 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:#FFFFFF;border-right:1px solid #3333FF;padding:12px 10px 8px}

#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1HAcyPu5xfmhWVgdNSruRXXl7XKzajimzXM78d8Bmfmnjg2xfBq8KVD7gQcsfZI_UcUvv0HLqvfbSk8OrJnuKQnlbkxUn3Xf6fKBC7wj0GdWqbnFGEnTfpEy9-zFb9GlXl-oQ-Yx66k4/s1600/trigertea.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:#3333FF;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:#3333FF;color:#FFCC00}

#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 #2F2FFF;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}

#menubar ul a:hover{background-color:#000066!important;color:#FFCC00!important;text-decoration:none}

6. Selanjutnya menempatkan kode html nya
7. Rekan cari tag <header>, agar cepat gunakan perintah pencarian dengan menekan Ctrl+F <header>
8. Tempatkan di atasnya.

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRDLzYnaEMKqc-RgAvFrmHU3DLSlpo62RCE0v6bDto58Gh-Lua3EheDDPlZbO3mwfgdtDy4EbNsm096CDgr8KIcuYzkxnb5wb-BFxoRmnXoKypJMrE33Hb_vho6g4v8zVCCvCzEdMCoLg/s1600/home_white.png' style='padding:0px;'/> Home</a></li>

<li><a href='#' target='new'>Tentang Admin</a></li>

<li><a class='trigger'>Kontak</a>

<ul>
<li><a href='#' target='new'>Acuy on Goggle +</a></li>
<li class='hr'/>
<li><a href='#' target='new'>Acuy on Facebook</a></li>
</ul>
</li>

<li><a class='trigger'>TKJ Negeri</a><ul>
<li><a href='#'>Modul</a></li>
<li class='hr'/>
<li><a href='#'>Tugas</a></li>
<li class='hr'/>
<li><a href='#'>Test</a></li>
</ul>
</li>

<li><a class='trigger'>TKJ Swasta</a><ul>
<li><a href='#'>Modul</a></li>
<li class='hr'/>
<li><a href='#'>Tugas</a></li>
<li class='hr'/>
<li><a href='#'>Test</a></li>
</ul>
</li>

</ul> <div class='menusearch'>
<div style='float:right;padding:8px 8px 0 0;'>
<form action='http://share-amal.blogspot.com/search' method='get' target=''>
<input name='sitesearch' style='display:none;' value='http://share-amal.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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNBpy8mwJFuKlNk78zba_Dy94Vv5BjLw1sSoSsgbZ6n39aeR5KmxxE_TQkLuoMH3pGGlbuKhvVcPJEeaUmBI9gwHUnoYkC03aioXRsRoUzN5udnrfJitfJXBQWBfyQZYQzOnDUOiQDRQI/s1600/field-bg.gif) no-repeat;' type='text' value='Cari disini saja ....'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDJbim6Nx3_ElykMJaAR-AvWDhg3Pk6w0iC3BF4cE1z3EXJxMN8C2ft6apmqcvxvinzxTrDiH9x_wB7JZ3r5khToUxx0KdM5O9ZGF_GV1mDzNPlCpjWJkTS3KhCTO8VG0-OonGtrchaqc/s1600/bg_search.gif' type='image' value='Search'/>
</form></div></div><br class='clearit'/></div><div style='clear:both;'/></div>

9. Pada skrip di atas terdapat tanda pagar # silakan rekan isi dengan link rekan sendiri
10. Dan setelah tanda # disana terdapat nama dari menu, silakan rekan ganti dengan keinginan sendiri
11. Demikian penjelasan dari saya tentang membuat menu drop down
12. Semoga tidak puas dan dapat menciptakan jenis menu yang lebih baik

Terimakasih.