Akhirnya postingan ini selesai setelah 2 hari di edit, itu waktu yang cukup lama buat newbie seperti ane, hihi. Kenapa posting tentang Cara Membuat Menu Horizontal Dropdown di Blogspot ini sangat lama di edit? Yah, lagi-lagi karena persoalan kurang pengalaman. Lebih dari itu, saya juga berusaha menguji postingan ini pada template yang berbeda dengan template yang saya gunakan. Kenapa harus diuji? Iya, karena tidak semua template memiliki pengaturan yang sama. Perbedaan ini terutama terjadi pada template bawaan blogger atau yang dibuat dengan "perancang template" dengan template yang kita download dari web penyedia template gratis.
Menu horizontal dropdown di blogspot harus kita buat secara manual. Meskipun pada "perancang tempate" yang disediakan oleh blogspot juga sudah memungkinkan membuat menu horizontal, yaitu menggunakan fitur laman, tapi tetap saja harus di edit secara manual agar dapat menjadi menu horizontal dropdown. Karena itulah, agar menu ini dapat kita gunakan sesuai keinginan, lebih baik kita membuatnya secara manual dari awal. (bertele-telenya kepanjangan ya? hihihi)
1. Silahkan masuk dengan akun blogger sobat
2. Setelah itu menuju ke halaman "edit HTML" ("Expand Template Widget" tidak usah dicentang). Jangan lupa untuk mem-backup templatenya.
3. Cari Kode ]]></b:skin> (gunakan CTRL + F atau F3 pada Keyboard sobat) Kemudian Pastekan kode CSS berikut ini tepat di atasnya.
#subnavbar {background: #666;width: 960px;height: 26px;color: #FFF;margin: 0;padding: 0;}#subnav {margin: 0;padding: 0;}#subnav ul {float: left;list-style: none;margin: 0;padding: 0;}#subnav li {list-style: none;margin: 0;padding: 0;}#subnav li a, #subnav li a:link, #subnav li a:visited {color: #FFF;display: block;font-size: 10px;font-weight: bold;text-transform: uppercase;margin: 0 5px 0 0;padding: 6px 13px;}#subnav li a:hover, #subnav li a:active {background: #888;color: #FFF;display: block;text-decoration: none;margin: 0 5px 0 0;padding: 6px 13px;}#subnav li li a, #subnav li li a:link, #subnav li li a:visited {background: #666;width: 140px;float: none;margin: 0;padding: 6px 10px;border-bottom: 1px solid #FFF;border-left: 1px solid #FFF;border-right: 1px solid #FFF;}#subnav li li a:hover, #subnav li li a:active {background: #888;margin: 0;padding: 6px 10px;}#subnav li {float: left;padding: 0;}#subnav li ul {z-index: 9999;position: absolute;left: -999em;height: auto;width: 160px;margin: 0;padding: 0;}#subnav li ul a {width: 140px;}#subnav li ul ul {margin: -25px 0 0 161px;}#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {left: -999em;}#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {left: auto;}#subnav li:hover, #subnav li.sfhover {position: static;}
4. Setelah itu, cari kode di bawah ini
<b:widget id='Header1' locked='true' title='Blog Demo (Header)' type='Header'/>Keterangan:
</b:section>
Yang penting dicari adalah kode warna hijau. Sementara yang berwarna merah adalah nama blog tempatku menguji coba (semacam laboratorium, heuuuuu hohoho).
Pastekan Kode berikut tepat di bawah kode yang berwarna kuning (yaitu kode</b:section>).
<div id='subnavbar'><ul id='subnav'><li><a href='#'>Home</a><ul><li><a href='http://soe86.blogspot.com/2010/07/perpustakaan-online-poenjakoe-soe86.html'>about</a></li><li><a href='http://soe86.blogspot.com/2010/05/contact.html'>Kontak</a></li></ul></li><li><a href='#'>DAFTAR ISI</a></li><li><a href='#'>Antropologis</a><ul><li><a href='#'>Mengenal Antropologi</a><ul><li><a href='http://soe86.blogspot.com/search/label/Konsep-Konsep%20dalam%20Antropologi'>Konsep-Konsep</a></li></ul></li><li><a href='#'>Teori Antropologi</a><ul><li><a href='#'>Teori Klasik</a></li><li><a href='#'>Teori Modernis</a></li><li><a href='#'>Teori Posmodernis</a></li></ul></li><li><a href='#'>Metodologi Penelitian</a><ul><li><a href='http://soe86.blogspot.com/search/label/Metode%20Penelitian%20Kualitatif'>Metode Penelitian Kualitatif</a></li><li><a href='#'>Metode Penelitian Kuantitatif</a></li></ul></li><li><a href='#'>Etnografi</a><ul><li><a href='#'>Mengenal Etnografi</a></li><li><a href='#'>Etnografi (Hasil Penelitian)</a></li></ul></li><li><a href='#'>My Reading List</a><ul><li><a href='http://en.wikipedia.org/wiki/Gender' target='_blank'>Gender</a></li><li><a href='http://en.wikipedia.org/wiki/Feminism' target='_blank'>Feminism</a></li><li><a href='http://www.lifepositive.com/body/nature/environmental.asp' target='_blank'>Nature - Earth crusader</a></li><li><a href='http://en.wikipedia.org/wiki/Ecofeminism' target='_blank'>Ecofeminism</a></li></ul></li><li><a href='#'>Figure</a><ul><li><a href='http://www.unep.org/women_env/w_details.asp?w_id=107' target='_blank'>Vandana Shiva</a></li><li><a href='http://soe86.blogspot.com/search/label/Parsudi%20Suparlan'>Parsudi Suparlan</a></li></ul></li></ul></li><li><a href='#'>Tips-Tips</a><ul><li><a href='http://soe86.blogspot.com/2010/07/belajar-otodidak.html'>belajar otodidak</a></li><li><a href='#'>tips blogger</a><ul><li><a href='http://soe86.blogspot.com/search/label/A.%20Tahap%20Awal%20Membuat%20Blog' target='_blank'>Tahap Awal Membuat Blog</a></li><li><a href='http://soe86.blogspot.com/search/label/B.%20Tahap%20Lanjutan%20dalam%20Bloging' target='_blank'>Tahap Lanjutan dalam Bloging</a></li><li><a href='http://soe86.blogspot.com/search/label/C.%20Tahap%20Profesional%20dalam%20Bloging' target='_blank'>Tahap Profesional dalam Bloging</a></li></ul></li><li><a href='http://soe86.blogspot.com/search/label/F.%20Tips%20Internet%20Murah'>internet murah</a></li></ul></li><li><a href='#'>Download Gratis</a><ul><li><a href='http://soe86.blogspot.com/2010/08/download-gratis-literatur-antropologi-1.html'>Literatur Antropologi</a></li><li><a href='http://soe86.blogspot.com/2010/08/pusat-download-gratis-di-sini.html'>Software / Aplikasi</a></li><li><a href='http://soe86.blogspot.com/2010/08/download-gratis-novel-1.html'>Novel</a></li><li><a href='http://soe86.blogspot.com/2010/08/download-gratis-masalah-kebidanan.html'>Kebidanan</a></li><li><a href='http://soe86.blogspot.com/search/label/Trik%20Mendownload'>Trik Mendownload</a></li></ul></li><li><a href='#'>BLOG SAHABAT</a><ul><li></li><li><a href='http://wawanwae.blogspot.com/' target='_blank'>Blogtainment</a></li><li><a href='http://azgi.blogspot.com/2010/05/koreksi-error-pada-kotak-komentar.html' target='_blank'>Sunda Priangan</a></li><li><a href='http://jurnalkita-indonesiana.blogspot.com/' target='_blank'>Komunitas Penulis Muda</a></li><li><a href='http://human-fisip-unhas.blogspot.com/' target='_blank'>HUMAN FISIP UH</a></li></ul></li></ul></div>
Nah, langkah terakhir adalah menyimpan templatenya. Silahkan lihat contoh hasilnya di sini
Menu yang sobat copy tersebut masih seperti menu pada blogku ini, makanya lakukan pengeditan sesuai blog dan keinginan sobat. Untuk cara mengedit menu horizontal dropdown, silahkan klik di sini.
Jika ada masalah, silahkan sobat berkomentar, mudah-mudahan saya bisa membantu.
Semoga bermanfaat....