Cara Membuat Horizontal Drop Down Menu Pada Blogspot

Horizontal Drop Down Menu, apa ya itu. Buat teman-teman yg belum tau apa itu menu dropdown, menu drop down ini adalah menu navigasi yang akan menampilkan sub menu di bawahnya secara otomatis apabila disorot oleh mouse. Sebenarnya banyak cara yang bisa dipakai untuk membuat menu drop down, dan salah-satu cara yang saya pakai adalah ya di bawah ini. Mungkin untuk melihat hasilnya seperti apa langsung saja kita praktekin saja caranya ya sobat.

Ikuti saja langkah berikut ini sobat :

1.   Sebelum memulai mengedit sebaiknya template punya sobat diedit terlebih dahulu ya.

2.   Login ke blogger dulu sobat ya.

3.   Klik tata letak.

4.   Klik sunting HTML.

5.   Contreng Expand Template Widget.

6.   Cari kode ]]></b:skin>, kemudian letakkan kode berikut sebelum kode ]]></b:skin>

Jqueryslidemenu {.
font: 12px tebal Trebuchet MS; background: # 414141; width: 100%;} ul {jqueryslidemenu. margin: 0; padding: 0; daftar-style-type: none;} / * daftar item tingkat Atas * / . jqueryslidemenu ul li { position: relative; display: inline; float: left;} / * Tingkat Top menu item link yang gaya * / ul li jqueryslidemenu a {. display: block; background: # 414141; / * background tab (default negara) * / warna: putih; padding: 8px 10px; perbatasan-kanan: 1px solid # 778; color: # 2d2b2b; text-decoration: none;} . * html ul li a jqueryslidemenu {/ * IE6 hack untuk mendapatkan sub menu link untuk berperilaku secara benar * / display: inline-block;} . jqueryslidemenu ul li a: link, ul li jqueryslidemenu a: visited {. warna: putih;} ul li jqueryslidemenu a: hover {. latar belakang: hitam; / * link tab latar belakang selama negara hover * / warna: putih;} / * 1 tingkat sub menu * / ul li ul jqueryslidemenu {. position: absolute; left: 0; display: block; visibility: hidden;} / * item menu tingkat Sub daftar ( membatalkan gaya dari Daftar Barang tingkat Atas) * / ul li ul jqueryslidemenu li. { display: list-item; float: none;} / * Semua tingkat sub menu berikutnya offset vertikal setelah 1 tingkat sub menu * / . jqueryslidemenu ul li ul li ul {top: 0;} / * Sub level menu link style * / ul li ul jqueryslidemenu li a {. font: 13px Verdana normal; width: 160px; / * lebar sub menu * / padding: 5px; margin: 0; border-top-width: 0; perbatasan-bottom: 1px kelabu;} . jqueryslidemenuz ul li ul li a: hover {/ * hover * sub menu gaya / background: # eff9ff; warna: hitam;} / * CSS kelas diterapkan gambar panah bawah dan kanan * / . downarrowclass { position: absolute; top: 12px; kanan: 7px;} . rightarrowclass { position: absolute; top: 6px; kanan: 5px;}

7.   Kemudian letakkan kode berikut sebelum kode </ head>

<!--[ If IE 7 LTE]>
<style type="text/css">
html jqueryslidemenu {height: 1%;} / * Holly Hack untuk IE7 dan di bawah * /.
</ style>
<[endif]! -> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/> <script src = 'http: / 'type =' / h1.ripway.com/anshul555/slidemenu_horiz.js text / javascript '/>

8.   Cari kode seperti ini yang mirip

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b: widget id = 'Header1' dikunci = 'true' title '= Judul Blog Sobat(Header) 'type =' Header '/>
</ b: section>
</ div>

Catatan : Untuk tulisan yang berwarna orange ganti dengan judul blog sobat

9.   Kemudian letakkan kode berikut tepat antara kode </ b: section> dan </ div>

<div class='jqueryslidemenu' id='myslidemenu'>
<ul>
<li> <a href='http://namablogsobat.blogspot.com'> Depan </ a> </ li>
<li> <a href='#'> Daftar Isi </ a> </ li>
<li> <a href='#'>Menu </ a>
<ul>
<li> <a href='#'> Menu 1.1 < / a> </ li>
<li> <a href='#'> Menu 1.2 </ a> </ li>
<li> <a href='#'> Menu 1.3 </ a> </ li >
</ ul>
</ li>
<li> <a href='#'> Menu </ a> </ li>
<li> <a href='#'> Menu </ a>
<ul>
< li> <a href='#'>Menu 2.1 </ a> </ li>
<li> <a href='#'> Menu 2.1 </ a>
<ul>
<li> <a href='# '>Menu 2.1.1 </ a> </ li>
<li> <a href='#'> Menu 2.1.2 </ a> </ li>
<li> <a href='#'> Menu 3.1.1 </ a>
<ul>
<li> <a href='#'> Menu 3.1.1.1 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.2 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.3 </ a> </ li>
<li> <a href='#'> Menu 3.1.1.4 < / a> </ li>
</ ul>
</ li>
<li> <a href='#'> Menu 2.1.4 </ a> </ li>
</ ul>
</ li>
</ ul >
</ li>
<li> <a href='#'> Menu </ a> </ li>
</ ul>
<br style='clear: left'/>
< / div>

Catatan :

*   Untuk text yang berwarna hijau silahkan sobat ganti dengan URL atau alamat link yang sobat mau
*   Untuk taxt yang berwarna orange silahkan sobat ganti dengan nama atau judul sesuai dengan keinginan sobat juga.

10.   Jangan langsung disimpan tapi dipreview dulu ya sobat, dan lihat hasilnya.

Semoga berhasil dan sukses ya sobat