Ketika sebuah blog tumbuh menjadi besar, maka semakin banyak pula menu dan link yang dibutuhkan. Jika kebetulan thema yang disediakan tidak mendukung, maka kita sendiri yang akan kebingungan dalam meletakan menu-menu tadi. Memang bisa kita mengganti thema kembali tetapi konsekuensinya kita harus melakukan setting ulang terhadap thema tersebut. Salah satu alternatif agar kita tidak perlu mengganti thema adalah dengan membuat menu drop down. Menu drop down merupakan menu tersembunyi di menu utama dan akan muncul ketika kita mengklik menu utama tadi atau hanya meletakan kursor di menu utama tadi. Bagaimana cara membuat menu drop down tadi ? Berikut ulasannya.
Drop Down Menu memang sangat populer dan sangat dibutuhkan pada saat ini. Jika di blog anda terdapat banyak link dan bingung untuk menaruhnya dimana. Nah, Drop-Down Menu adalah jawabannya. Drop Down Menu yang bagus dan indah ini dibuat full CSS tanpa JS (JavaScript). Sehingga anda tidak perlu khawatir jika loading blog anda lambat.
Langkah untuk membuat Drop-Down Menu :
- Login ke blogger.com
- Masuk ke menu Rancangan (Design) dan pilih Edit HTML
- Centang Expand Widget Template
- Cari kode <body>
- Masukkan kode berikut dibawah kode <body>
<link href=’http://dl.dropbox.com/u/11103024/menu.css’ media=’screen’ rel=’stylesheet’ type=’text/css’/>
<b:section id=’menu’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’HTML91′ locked=’false’ title=’Menu’ type=’HTML’/>
</b:section>
Kode diatas berfungsi untuk membuat sebuah JavaScript/HTML di Elemen Laman. - Klik Simpan Template
- Masuk ke Elemen Laman
- Cari Elemen Laman yang bernama Menu, kemudian klik Edit. Lihat Screenshoot !
- Masukkan kode dibawah ini
<ul>
<li><a href=”">Home</a></li>
<li><a href=”#”>1 Column</a>
<div>
<div>
<ul>
<li><a href=”#”>Totto 1</a></li>
<li><a href=”#”>Totto 2</a></li>
<li><a href=”#”>Totto 3</a></li>
<li><a href=”#”>Totto 4</a></li>
<li><a href=”#”>Totto 5</a></li>
<li><a href=”#”>Totto 6</a></li>
<li><a href=”#”>Totto 7</a></li>
<li><a href=”#”>Totto 8</a></li>
<li><a href=”#”>Totto 9</a></li>
<li><a href=”#”>More…</a></li>
</ul>
</div></div></li>
<li><a href=”#”>2 columns</a>
<div>
<div>
<h3>Totto 10</h3>
<ul>
<li><a href=”#”>Totto 11</a></li>
<li><a href=”#”>Totto 12</a></li>
<li><a href=”#”>Totto 13</a></li>
</ul>
</div>
<div>
<h3>Totto 14</h3>
<ul>
<li><a href=”#”>Totto 15</a></li>
<li><a href=”#”>Totto 16</a></li>
<li><a href=”#”>Totto 17</a></li>
</ul>
</div>
<div>
<h3>Totto 18</h3>
<ul>
<li><a href=”#”>Totto 19</a></li>
<li><a href=”#”>Totto 20</a></li>
<li><a href=”#”>Totto 21</a></li>
</ul>
</div>
<div>
<h3>Totto 22</h3>
<ul>
<li><a href=”#”>Totto 23</a></li>
<li><a href=”#”>Totto 24</a></li>
<li><a href=”#”>Totto 25</a></li>
</ul>
</div></div></li></ul> - Ganti kode # dengan URL tujuan. Ganti Totto 1, Totto 2, Totto 3, Totto… dengan anchor teks dari URL tersebut.
- Kemudian Klik Simpan
sumber :http://totto-apa-adanya.blogspot.com/2011/06/membuat-drop-down-menu.html
Post a Comment Blogger Facebook