Cara simple membuat menu Dropdown dengan edit Html

Cara simple membuat menu Dropdown dengan edit Html

Mungkin anda menemukan artikel saya ini karena ingin desain blog anda terlihat bagus dan profesional, karena semakin tampilan blog anda tampak bagus dan keren maka para pengunjung akan semakin percaya jika anda adalah blogger profesional entah kenyataannya he. salah satunya agar blog kita tampak baik dan rapi salah satunya adalah menambahkan menu dropdown pada menu tab, seperti pada tampilan blog saya ini jika anda sorot menu tab TUTORIAL maka akan muncul sub menunya yaitu :

1. Microsoft word
2. Microsoft Excel
3. Animasi, seperti pada gambar berikut:

Jika anda ingin membuat menu semacam menu tab seperti blog saya ini maka silahkan anda lakukan langkah-langah berikut:

Cara simple membuat menu Dropdown dengan edit Html

Cara ini saya peruntukkan bagi anda yang templatenya kebetulan sama atau perisi seperti template yang telah saya gunakan, jadi bagi anda yang templatenya berbeda maka tidak saya sarankan untuk mengikuti tutorial ini sehingga jika anda yang templatenya berbeda dan anda tetap melakukannya maka saya tidak bertanggung jawab jika ada sebuah kendala yang tidak diinginkan. Baiklah langsung saja silahkan anda ikuti angkahlangkah berikut ini:

1. Silahkan anda perhatikan pada menu tab di atas sebelum menu tab TUTORIAL adalah Menu TIPS DAN TRIK maka kita akan mencari kode tersebut didalam template. dan kira-kira kodenya adalah seperti berikut:

<li><a href='http://tentangwebsites.blogspot.co.id/search/label/Komputer' title='Tips dan Trick'>Tips dan Trick</a></li>

dan silahkan anda cari sesuai NAMA MENU TAB yang ada pada template anda.

2. Dan setelah ketemu maka silahkan anda tempelkan kode berikut tepat dibawahnya:

<li class='sub'><a href='#' title='My tutorial'>Tutorial</a>
<ul>
<li><a href='http://tentangwebsites.blogspot.com/search/label/Ms%20Word' title='Tentang Microsoft word'>Microsoft word</a></li>
<li><a href='http://tentangwebsites.blogspot.com/search/label/Microsoft%20excel' title='Tentang Microsoft Excel'>Microsoft Excel</a></li>
<li><a href='http://tentangwebsites.blogspot.com/search/label/animasi' title='Tentang Animasi'>Animasi</a></li>
</ul>
</li>
</ul>

3. Selanjutnya silahkan anda pratinjau terlebih dahulu sebelum menerapkannya
4. Jika berhasil dan cocok klik simpan

Keternagan kode :

1. Untuk kode yang berwarna biru silahkan anda ganti dengan url blog anda sendiri
2. warna merah, adalah kata-kata yang tampil saat kursor menyentuh menu tersebut seperti pada gambar diatas yaitu saat kursor menyentuh menu ANIMASI maka akan tampil kata-kata Tentang animasi.
3. warna ungu adalah nama menunya
4. kode yang saya blog hitam </ul> yaitu tergantung kode pembuka yang ada pada header template anda, karena kode pembuka saya adalah <ul> maka saya tutup dengan </ul>kira-kir kode pembuka tersebut adalah <ul class='tentang-websites' id='imam'>

Ok demikianlah sharing kami kali ini tentang cara membuat menu dropdown dengan cara edit html pada blog, saya sarankan lakukan dengan teliti dan hati-hati, backup terlebih dahulu template blog anda terlebih dahulu untuk menjaga hal-hal yang tidak diinginkan. semoga berhasil sampai jumpa salam.

Tweet

Subscribe to receive free email updates: