Eitssss lihat dulu gambar diatas... Heeeyyy!!! liatnnya biasa aja dunk. hehehe.... yaa... kira-kira seperti diatas menu dropdown yang akan kita buat saudara... ^_^
Okee next, karena sering mendapat pertanyaan dari saudara blogger tentang cara membuat menu dibawah nama blog alias menu drop down yang saya pake di blog Bosen Gaptek ini, sekarang saya akan berikan cara untuk membuat menu drop down yang tentunya lebih keren dari blog saya ini.. hehehe,, langsung saja simak Cara Bikin Menu Drop Down Keren Di Blog di bawah ini....
Seperti biasa, langkah yang pertama yaitu login dulu ke akun blogger anda..
kemudian pilih Rancangan>>Edit HTML>> Centang Expand Template Widget
Download/backup dulu template anda untuk menghindari kesalahan pada pengeditan ,Kemudian cari kode ]]></b:skin>,lalu copy dan paste kode dibawah ini tepat di atas kode ]]></b:skin> :
.nav { height:35px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhls_SpUVpfYHk0utAnOYYRXj2mh8O0ZyM2mHnAbjbP95vuD_41emVkkL-WpH2cDzulPrQ4EGcVgLZI0UrAiaL2eZaUuwQY93WkRdoLwl0N2QgqkuF_MzojHNjrZ4jvjiKVRGOn30GxKno/s1600/bg.gif) repeat-x; position:relative; font-family:arial, verdana, sans-serif; font-size:11px; width:100%; z-index:100; margin:0; padding:0; } .nav .table { display:table; margin:0 auto; } .nav .select, .nav .current { margin:0; padding:0; list-style:none; display:table-cell; white-space:nowrap; } .nav li { margin:0; padding:0; height:auto; float:left; } .nav .select a { display:block; height:35px; float:left; font-weight:bold; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhls_SpUVpfYHk0utAnOYYRXj2mh8O0ZyM2mHnAbjbP95vuD_41emVkkL-WpH2cDzulPrQ4EGcVgLZI0UrAiaL2eZaUuwQY93WkRdoLwl0N2QgqkuF_MzojHNjrZ4jvjiKVRGOn30GxKno/s1600/bg.gif); padding:0 30px 0 30px; text-decoration:none; line-height:35px; white-space:nowrap; color:#2b3238; } .nav .select a:hover, .nav .select li:hover a { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRspbY1P255FMXP8omb8MfEqbfGVZ1uzrWVWjmfq_gDyjqHP1m87-tlH7PJQSL7AUXHCHMC_hyOPs_wXTWqppP6FXLUYDph4VnJwK7HN5whOZP8V8ntrMgKVMtkhsAMdzcK7c5jYNIBV4/s1600/hover.gif); padding:0 0 0 15px; cursor:pointer; color:#2b3238; } .nav .select a b{ font-weight:bold; } .nav .select a:hover b, .nav .select li:hover a b { display:block; float:left; padding:0 30px 0 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRspbY1P255FMXP8omb8MfEqbfGVZ1uzrWVWjmfq_gDyjqHP1m87-tlH7PJQSL7AUXHCHMC_hyOPs_wXTWqppP6FXLUYDph4VnJwK7HN5whOZP8V8ntrMgKVMtkhsAMdzcK7c5jYNIBV4/s1600/hover.gif) right top; cursor:pointer; } .nav .select_sub { display:none; } /* IE6 only */ .nav table { border-collapse:collapse; margin:-1px; font-size:1em; width:0; height:0; } .nav .sub { display:table; margin:0 auto; padding:0; list-style:none; } .nav .sub_active .current_sub a, .nav .sub_active a:hover { background:transparent; color:#2b3238; } .nav .select :hover .select_sub, .nav .current .show { display:block; position:absolute; width:100%; top:35px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhzTDbVcUQ1FkkeTURUjUsjBp8EunIxD34pAfpMWiU1aHS0EAs2BB8oCmSL7KVbzgHeRIvHzICin0EPuTOPQuBQKjijyxUHwsIv5WGtKlA2tKeR4aVvjX4glgkKinn9wNzFph1ZhuF3c/s1600/back.gif); padding:0; z-index:100; left:0; text-align:center; } .nav .current .show { z-index:10; } .nav .select :hover .sub li a, .nav .current .show .sub li a { display:block; float:left; background:transparent; padding:0 10px 0 10px; margin:0; white-space:nowrap; border:0; color:#2b3238; } .nav .current .sub li.sub_show a { color:#2b3238; cursor:default; } .nav .select .sub li a { font-weight:normal; } .nav .select :hover .sub li a:hover, .nav .current .sub li a:hover { visibility:visible; color:#73a0d2; } |
Setelah itu simpan template anda.
Masuk ke bagian Rancangan>>Elemen Laman>>Tambah Gadget>>HTML/Java Script.
Kemudian copy dan pastekan kode dibawah ini kedalam HTML/Java Script tersebut
:
<div class="nav"> <div class="table"> <ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a></li></ul> <ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="#"><b>Bosen Gaptek</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> </ul> </div> </li> </ul> <ul class="select"><li><a href="#"><b>Sample Menu</b></a> <div class="select_sub"> <ul class="sub"> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> <li><a href="#">Gaptek</a></li> <li><a href="#">Bosen</a></li> </ul> </div> </li> </ul> </div> </div> |
Ganti kode " # "dengan alamat URL yang akan ditujukan
Ganti "Bosen Gaptek", "Bosen", "Gaptek", sesuai dengan kebutuhan anda...
Setelah itu simpan, dan lihat tampilan blog baru anda, dengan menu dropdown yang kereeen dan machaaaan.... hehehehe.. sangat mudah bukan ? okee saudaraa cukupp sekian informasi dari saya semoga bermanfaat... selamat mencoba dan semoga sukses...!!
wokeeh thanks infonya
ReplyDeletesangat bermanfaat
Thanks ya Mas sharenya...,
ReplyDeletethank infonya gan
ReplyDeletebisa g menu pada blogger di edit menjadi drop down tanpa menamba Gadget>>HTML/Java Script.
ReplyDeletekirim via email
yudi_29@yahoo.com
ok brow thans
SIIIP
ReplyDeleteshipppppp keren abizzzz
ReplyDeletesipppp
ReplyDeletekunjungi juga >>>>
ReplyDeletehttp://afifatu-fachrudin.blogspot.com
thx infonya boss....
ReplyDeletemasuh bingung ahh..
ReplyDeletemantap gan ane uda terapkan di blog ane... :)
ReplyDeletevisit back gan
mksh atas info'x sob sangat membantu sekali bagi saya yang pemula..
ReplyDeletetrima kasih atas ilmunya, salam kenal
ReplyDeletedicoba
ReplyDeletethanks gan infonya ..
ReplyDeletejngan lupa mampir ke blog saya gan
http://mangaknb.blogspot.com/