Cara Membuat Menu Horizontal Drop Down di Blogspot
Bagaimana Cara Membuat Menu Horizontal Drop Down di Blogspot? Itulah pertanyaan yang selalu menghantui hati dan pikiran saya selama ini. Berbagai tutorial dari webmaster sudah saya pelajari dan sudah saya praktekkan. Dengan berbagai kerumitan yang diberikan. Alhasil malah template jadi eror. Padahal menu tersebut cukup menarik apa bila dipasang di sebuah blog. Anda pasti tertarik bukan?
Dari berbagai uji coba kecil-kecilan dengan mengkombinasi antara kode HTML yang satu dengan yang lainnya, akhirnya saya menemukan cara yang cukup mudah untuk diaplikasikan oleh anda semua. Namun, perlu dicatat bahwa untuk membuat menu drop down ini hanya bisa dilakukan pada template yang support. Dalam artian, template yang di dalamnya sudah ada kode tertentu. Nanti saya akan jelaskan pada paragraf di bawah ini.
 |
| Live Demo |
Nah, coba anda perhatikan gambar diatas. Terlihat menarik kan? Apabila kursor mouse diarahkan ke menu navigasi, maka akan muncul sub menu lagi. Silahkan klik demo untuk melihat lebih jelas. Berikut akan saya jelaskan cara membuat menu drop down tersebut. Silahkan anda simak baik-baik.
Cara Membuat Menu Horizontal Drop Down di Blogspot
1. Silahkan log in ke Blogger > Dashboard > pilih Menu Template > klik Edit Template > cari kode seperti di bawah ini. Perlu dicatat bahwa tidak semua template ada kode seperti ini.
<div CLASS='bar'>
<ul id='dropdown'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a HREF=' '>Kecantikan</a></li>
<li><a HREF=' '>Resep Masakan</a></li>
<li><a HREF=' '>Gaya Hidup</a></li>
<li style='border-right:1px solid #fff;'> <a HREF=' '>Busana</a></li>
2. Setelah kode nomor 1 sudah anda temukan, silahkan letakkan kode dibawah ini tepat dibawah kode nomor 1.
<li><a class='sf-with-ul' href=' '>Kesehatan</a>
<ul class='sub-menu'>
<li><a href=' '>Tips Diet</a></li>
<li><a href=' '>Tips Hamil</a></li>
<li><a href=' '>Tips Sehat</a></li>
</ul>
</li>
Keterangan:
Kode warna biru diisi dengan url label/kategori blog anda
Kode warna merah diganti dengan nama lebel/kategori blog anda
3. Setelah itu klik Save dan lihat hasilnya. Apabila anda mempraktekkannya dengan benar, pasti akan berhasil, karena saya sudah membuktikannya.
Demikian informasi yang dapat saya sampaikan untuk anda tentang Cara Membuat Menu Horizontal Drop Down di Blogspot. Semoga dapat bermanfaat. Terimakasih banyak atas perhatiannya. Wassalam.
Categories:
Blogging
21 komentar:
thanks mba dah tamhah librari artikel, saya bookmark lagi deh biar gampang menuju artikelnnya
Bisa juga di tambahin border-radius untuk a hover nya, biar makin jos,
sip mbak.. ijin simpan dulu ya mbak. soalnya belum bisa praktekin saya.. karena nggak punya komputer mbak.. kirimin saya laptop donk mbak.. biar bisa praktekin tutorial dari mbak eka... hehehehe
Pak walidin, iya pak sama-sama. Thanks juga sudah berkunjung di blog saya :)
Mas Arie, wah kalau soal border radius saya kurang begitu paham mas hehehe :D
Mas Nady, silahkan di save mas biar nggak ilang tutorialnya hehehe :D Wah saya kuga mau mas kalau dikirim laptop hehehe :D
Numpang baca-baca mba' www.blogunda.nazuka.net
Mantap.... tutornya...
Pak BlogUnda, iya pak silahkan di baca tutorialnya secara seksama. Kalau ada yang belum paham, nanti bisa di tanyakan hehehe :D
bisa jadi solusi saat menu Laman blog sudah penuh biar lebih simple.. ;D
sip, thanks buat Tutornya mbak...
Sepertinya harus di tes dengan beberapa browser, minimal 5 browser yang paling banyak digunakan orang khususnya indonesia. Seberapa responsifnya dropdown menu, dan seberapa compatiblenya. Terlebih dengan perangkat mobile device yang semakin banyak digunakan orang.
Mas Daniel, betul itu mas. Jika menu navigasi blog dirasa sudah penuh, cara ini bisa dilakukan untuk memperingkas menu, yakni memasang sub menu. Thanks ya :)
Pak walidin, saya kurang tahu apakah dropdown menu itu responsive atau tidak pak hehehe, yang jelas bila menu navigasi ingin terlihat menarik dan keren, ini bisa menjadi solusinya hehehe :D
jadi mbak eka mau kirimin saya apa..? tablet ya..? hahahahaha
Tak kirim salam aja mas, biar sehat dan tetap semangat nge-blog hehehe :D
Terimakasih mbak akhirnya tutorial menu horizontal drop down pada blogspot yang sedang saya cari saya dapat disini, makasih banyak yah :)
Pak sehatalami99, iya pak sama-sama. Ma kasih juga sudah berkunjung dan berkomentar di blog saya :)
Terimakasih atas sharingnya. Dengan cara ini, tampilan laman atau tap menu akan tampak lebih ringkas.
Benar itu pak. Selain lebih ringkas juga akan terlihat lebih menarik. Tapi kita harus tetap memperhatikan posting di bawah nya. Karena seringkali menu dropdown ini justru menghalangi postingan di bawah nya. SEhingga dalam pemasangannya harus benar-benar tepat dan akurat. :)
numpang baca :D
Silahkan Pak amiruddin, ma kasih sudah berkunjung di blog saya :)
Saya sudah coba namun hasilnya malah amburadul. Untung sudah saya save XML defaultnya, jadi begitu diterapkan terjadi error (Mungkin template saya tidak cocok kali), bisa dikembalikan ke semula :)
Iya memang tidak semua template bisa menerapkan cara ini pak. Hanya template tertentu saja yang bisa. Misalnya template Putih Biru. Thanks pak sudah berkunjung kemari :)
Thank's gan tutorialnya..
ok sama-sama :)
Post a Comment