Membuat Drop Down Menu - 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. Saya telah menerapkan hasil Drop Down Menu ini di blog saya yang satunya. Silahkan lihat hasilnya :
Langkah untuk membuat Drop-Down Menu :
1. Login ke blogger.com
2. Masuk ke menu Rancangan (Design) dan pilih Edit HTML
3. Centang Expand Widget Template
4. Cari kode <body>
5. 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.6. Klik Simpan Template
7. Masuk ke Elemen Laman
8. Cari Elemen Laman yang bernama Menu, kemudian klik Edit. Lihat Screenshoot !
 |
| (Klik Untuk Memperbesar) |
<ul class="menu">
<li class="no_drop"><a href="">Home</a></li>
<li><a href="#" class="drop">1 Column</a>
<div class="dropdown_1column">
<div class="col_1">
<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="#" class="drop">2 columns</a>
<div class="dropdown_2columns">
<div class="col_1">
<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 class="col_1">
<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 class="col_1">
<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 class="col_1">
<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.10. Kemudian Klik Simpan
Mudah bukan ? Sebenarnya semua hal tidak terlalu sulit seperti yang kita bayangkan. Baik, jika anda merasa ada kesulitan atau apapun. Silahkan tulis di kotak komentar dibawah ini. Semoga berhasil.sumber
Home
All Post
About
Contact
Privacy Policy
747E7BEA
makasih mas info nya..
ReplyDelete@Dua Box :
ReplyDeletesama-sama mas. silahkan dicoba.
Keren.. Rugi kalau ga dicoba
ReplyDelete@Kang AMphi :
ReplyDeletesilahkan dicoba. makasih ya.
wah saya baru pertama kali liat menu horizontal yang beginiaan..
ReplyDeletekeren euy :)
Nice tips bro, blum ane cuba. Ntar ane cuba deh..
ReplyDeleteOiya salam kenal, ni kunjungan pertamax..
Selamat karena ada berhasil menjadi pembeli cendol pertamaxxx..
:D
@sichandra :
ReplyDeletesilahkan dicoba, sob. makasih.
@Bang_Andre :
ReplyDeletehehehe...
salam kenal juga, bro. selamat mencoba. semoga sukses. makasih.
Makasih infonya, ohya bung, blogroll ama dropdown menu beda kah ? Apa bedanya ?
ReplyDelete@obinhut :
ReplyDeleteblogroll sama drop down beda, mas. blogroll adalah seperti teks area yang mempunyai efek scroll. kalau dropdown menu adalah sebuah menu horizontal jika pointer mouse digerakkan ke salah satu menu, akan timbul sebuah efek kebawah dan berisi link-link atau menu-menu.
woww, punya saya pantes ngga ya saya kasih menu itu?? wkwkwkkk
ReplyDeletemakasih mas atas infonya, lumayan buat eksperimen :D
Wuihh.. keren Mas :D
ReplyDelete@Ladida Cafe :
ReplyDeletewarnanya diganti saja, di matchingkan sama blog mas agar match. silahkan mencoba. terimakasih kembali.
@Pradisz Wardhana :
ReplyDeletesilahkan dicoba, mas. makasih.
pakai css 3 yah ini mas, keren.... tapi aq lebih suka yang simple aja mas
ReplyDelete@Rikyzone.com :
ReplyDeleteiya, lebih simple memang sangat banyak yang menggemari. tapi, jika kode diatas di edit sedikit dan warnanya di matching in sama blog mas, mungkin dropdown menu ini cocok untuk blog anda. makasih.
tapi yang jd masalah adalah mau aq isi apa, bingung, yang aq pakai sekarang aja aslinya dropdown, tp aq hapus
ReplyDeletewah, kayaknya bagus tuh mas..
ReplyDeletekapan2 dicoba ah. thanks sharenya
Makasih infonya kawan, ini posting sangat saya butuhkan dan saya tunggu2. ntar pasti aku praktekin nich. salam
ReplyDelete@Rizkyzone :
ReplyDeletediisi label saja, mas. biasanya di pencarian google, menu dropdown terindeks. punya saya sengaja tidak saya isi, karena sudah ada widgetnya. selain itu takut jumlah linknya banyak.
@Gudang Blog :
ReplyDeleteoke, silahkan mencoba. makasih.
@Yudi Yunior :
ReplyDeletesilahkan mencoba, kawan. makasih kembali. salam juga.
Wah mantep tuh ! Gitu ya. Mantep mana blogroll atau dropdown kalau menurut mas Totto ?
ReplyDelete@obinhut :
ReplyDeletetergantung kebutuhan sih. jika kita akan memasang link banyak, sebaiknya memakai blogroll. jika memasang link yang cukup, pakai dropdown saja.
He..he..he.. mantab mas menunya. Keren abiss... ^_^
ReplyDelete@Naufal Aminur Rahman :
ReplyDeletesilahkan dicoba, mas. makasih.
blog q nanti jd rame kalau aq isi macem2 hehehhee
ReplyDeletelah inimah artikelnya sama kaya blog vietnam http://noct-land.blogspot.com .mungkin blog ini referensinya dari dia ya
ReplyDelete@Rizkyzone :
ReplyDeleteterserah anda saja. lebih simple lebih baik kok. makasih ya.
@Anonim :
ReplyDeletebetul sekali.
absen malam aja mas, sambilnunggu post barunya
ReplyDelete@Rizkyzone :
ReplyDeleteoke, mas. tapi, sekarang saya lagi nyari ide. makasih.
Mantap sobt Menu nya.. . Baru liat yang kaya gini :D .
ReplyDelete@Asoka Site :
ReplyDeletesilahkan dicoba, sobat. makasih.
This is the reason why I hate Indonesian. They only know copy, copy and never leave a source link.
ReplyDelete@Noct :
ReplyDeleteoh, i'm sorry. starting from the copy until now, I still include the reference source. reference source is located at the end of this article. thank you for this nice article. sorry if you mind.
@cialis :
ReplyDeleteyou're welcome.
keren gan , oya kalau kita iklan di sitti ada pake rekening gk??
ReplyDelete@sayaberitahu :
ReplyDeletedi sitti ada yang pakai rekening. makasih kembali.
ok saya coba gan salam kenal
ReplyDeleteoya untuk
menu drop down pada konfigurasi ngisi artikel saat mau posting gmn untuk jelasnya gan share ilmunya
@fien (خشنل ارفى ) :
ReplyDeletesalam kenal juga.
maksudnya gimana? saya kurang jelas. maaf.
bagus tenan sob, tapi kalao mau nyari background image dalam bentuk gambar dimana yah?
ReplyDeleteini artikel menarik mas, boleh juga untuk dicoba.... cuman saya pernah menyimpan link dengan membuat menu sendiri khusus untuk tukar link.... mungkin cara mas boleh juga dicoba nantinya, tks shering nya ya.
ReplyDeleteDitunggu kunjungan dan saran mas di blog saya juga.... tks lagi
@belajar seo blogspot :
ReplyDeletekalau mencari background gambar banyak kok. cari saja di google. makasih kembali.
@TechSega :
ReplyDeletesilahkan dicoba. ok, saya akan mengunjungi blog anda. makasih kembali.
Udah lama ga pake blogger jadi kepingin nyobain nih
ReplyDeletebagus sih di liat dari gambarnya
Wah wah wah keren nih triknya baru tau saya, trims dah sharing sobat, salam kenal ya, dicoba ah :D
ReplyDeletemas,matur suwun yo
ReplyDelete@Nurul Imam :
ReplyDeleteok, mas. silahkan dicoba. makasih.
@All About Anime :
ReplyDeletesilahkan dicoba. makasih.
salam kenal juga, sobat.
@muh Fawaid :
ReplyDeleteiya, sama sama.
trik ini berlaku untuk template yang bukan bawaan blogspot ga mas?
ReplyDeletehebat sob...
ReplyDeletegood idea...
ijin simpen ya sob tips nya
@pulsa elektrik :
ReplyDeleteya, template ini berlaku untuk semua template blogger, bukan WordPress. silahkan dicoba. makasih.
belum ada post baru lagi nih sob, happy blogging aja lah
ReplyDelete@Tips Blog Kadaluarsa :
ReplyDeleteok, makasih.
@Rizkyzone.com :
ReplyDeletebelu ada sob. lagi mencari ide. ok, sob. makasih.
Udah langsung otomatis jQuery niy...
ReplyDeletemas,buatinlah drop down offline , ngawi,13-04-2000
ReplyDelete@ToPu :
ReplyDeleteiya, sob. karena di file css sudah disisipkan jQuery.
@muh Fawaid :
ReplyDeletewah, saya baru dengar tuh drop sown offline.
iya,terserah ejek2lah , tapi mana tuh drop down nya ???????????????
ReplyDeletekalau gak di balas masuk neraka !!!!!!!!!!
@muh Fawaid :
ReplyDeletebukan mengejek, mas. tapi, saya baru tahu kalau ada dropdown offline. maksudnya tuh gimana?
Ok makasih sob... langsung coba^^
ReplyDelete@Anvir :
ReplyDeletesama-sama, sob. selamat mencoba.
wah mantaps gan
ReplyDelete@randy oktaran :
ReplyDeletesilahkan dicoba. makasti sudah mau komentar.
sebenernya saya seneng banget sob, tetapi warnanya gak pas dgn template saya.
ReplyDeleteada yg warna abu2 gak??
@adjie :
ReplyDeletediedit sendiri saja, sob. mudah kok. tinggal ganti warna merah di link CSSnya.
saya udah lama ga pake blogspot! abis lebih enak wordpress hehe!
ReplyDelete@afiv :
ReplyDeleteow, saya malahan tidak pernah memakai WordPress.
wah lumayan bang Untuk CSS Picturenya boleh di bagi nih.....??!!
ReplyDelete@Cara setting Domain Dot Tk :
ReplyDeleteok, mas. terimakasih.
wah.. menarik juga nih, ijin bukmak dulu gan, tar udah solat maghrib ane pelajari.. :)
ReplyDelete@Obat Paling Alami :
ReplyDeletemakasih, gan. ok, gan. silahkan.
nice post kak bisa di coba nih
ReplyDelete@bagashp :
ReplyDeletemakasih. silahkan dicoba.
wouwww..keren, ini yang ane cari gan..
ReplyDeleteterima kasih..
segera ane coba script nya..
@tips dan trik menarik lawan jenis :
ReplyDeletesama-sama. silahkan mencobanya.
wah makasih infonya :D Noce info :D
ReplyDeletekalo berkenan silahkan kunjungi blog saya :D
wah rame ya blognya penuh dengan tutorial yang bermanfaat..kunjung balik ya :)
ReplyDeleteTutorial Sharing Blog
Wah info bagus buat blog baruku nih..
ReplyDeletevisitback+comment2
trims infonya ya,..bisa blajar buat menu drop down
ReplyDeleteblog yg sangat mnrik pengnjung,..
ReplyDeletemas kok saya mencari bacaan "body" susah diytemukan ? -_- bisa jelaskan letaknya secara spesifik?
ReplyDelete@Siti Hafidoh :
ReplyDeletekalau di blog saya, letak kode <body> terdapat setelah (dibawah) kode </head> *
*setiap template berbeda
makasih bro...
ReplyDeletecara membuat menu drop downnya berwarna biru caranya gmn ?
ReplyDelete@Pradipta Megantara :
ReplyDeleteedit kode warna pada kode CSS http://dl.dropbox.com/u/11103024/menu.css
kemudian, simpan dan jadikan menjadi link seperti semula.
Koq di blog gw ngga ada tulisan menu nya gan ?
ReplyDeletenie tkp nya : http://granat-4ever.blogspot.com/
@Ivan The Granat :
ReplyDeletecoba ulangi langkah kelima !
wah, makasih tutorialnya mas,
ReplyDeletesudah tak pake di blog.ku ini
http://powellngupoyo.blogspot.com/
Ganti kode # dengan URL tujuan. Ganti Totto 1, Totto 2, Totto 3, Totto... dengan anchor teks dari URL tersebut.
ReplyDeleteMaksudnya gimana sih mas,,,aku dah coba tapi gak bisa malah error. Tolong dijelasin sedikit aja yah mas. terima kasih sebelumnya
Bagaiman kalau kata 1 column kita ganti sendiri, biar tulisanya tampil seperti yang kita inginkan. mohon pencerahanya??
ReplyDeletethanks mas bro ...
ReplyDeletehttp://kelaspojok.org
hasilnya seperti apa ya...nanti pas praktek kok eror gimana???
ReplyDeleteq juga bingung. tolong dijelaskan Ganti kode # dengan URL tujuan. Ganti Totto 1, Totto 2, Totto 3, Totto... dengan anchor teks dari URL tersebut.
ReplyDeleteThanks bro..oia tapi mksud ganti Toto1,Toto2 itu di gmnain apanya yang diganti??
ReplyDeletewww.fuad-xp.blogspot.com
om, kok gak ada tulisan menunya ya?
ReplyDeleteBang bisa ganti warna gak nih ?? hehe
ReplyDeleteThanks infonya gan...
ReplyDeletebisa ya warna merah Drop Down Menu itu di rubah ke warna lain...... klo bisa gekmana cara caranya tolongnya .......
ReplyDeleteIni baru keren, karena ketidaktahuan saya dari dulu blog saya cuma dipasang Home saja ... hehehe. Thks ya sobat
ReplyDeletePernah standar blogger sudah diisi header widget, pas dipasang tiba-tiba kolomnya header widgetnya hilang lagi. Jadi kalau diedit mesti masuk kemana ya sobat ? Seperti di Agung Car biar link bisa terbuka di jendela baru. Thks
ReplyDeleteWe were unable to save your template
ReplyDeletePlease correct the error below, and submit your template again.
More than one section was found with id: menu. Section IDs should be unique.
Muncul ini sobat, Mahsudnya apa ya ? Thks
bos mo nanya nih..
ReplyDeletebisa gak ganti warna merah menu navigasinya dengan warna lainnya ???
trus cara bikin navigasinya di tengah2 blog gimana ???
silahkan berknjung ke sini untuk melihat previewnya
http://trialnewbie.blogspot.com
mohon bantuannya,, ane newbie nih :)
tengs b4
Mantap infonya, dicoba dulu deh mas ya...
ReplyDeletewah ini yg saya cari2
ReplyDeleteartikel cukup bagus"
ReplyDelete@Totto (Mustofa Ali Mubarok) :
ReplyDeletemas ini gak seperti laman tha? cara mengisi ini dengan text gak bisa ya?
Ooo seperti itu caranya...akan saya coba
ReplyDeletemakasih ya tas informasinya
ReplyDeletemakasih bgt nih... bnyak mmbantu :)
ReplyDelete@Fandi Adhitya : fandi dah nemu, gue nyusul
ReplyDeleteThanks y atas infonya
ReplyDeleteMas, bagaimana menghubungkan sub.dropdown ke kategori atau judul postingannya ya mas... tks sblm n ssudahnya...!!
ReplyDeletehaduh gan jadi berat ya,,, thanks gan ane uda dapet nav menu 2 colums lebih enteng..
ReplyDeletecara buat demonya gmn ya,,,???
ReplyDeletesekalian scriptnya dong,,, soal hosting blog cm pake gambar bnyak ini saya,,,
mohon bntuannya ya... neubi
salam kenal sebelumnya ,gimana kok waktu disave ngak bisa dan terjadi kesalahan apa kode JavaScript pada setiap templet itu memang beda tolong pencerahannya mau belajar gan... terimakasaih
ReplyDeletejmnkhgjhjhjjj
ReplyDeletewalah-walah mantep,, sederhana tapi terkesan mewah dropdownnya,, izin sedot mas bro...
ReplyDelete