Kemarin saya ketemu teman saya dikampus dan dia bertanya kepada saya bagaimana tips membuat dropdown menu dan sekarang saya akan menjelaskannya. Mungkin dia masih pemula baru pertama bikin blog dan jangan salah saya juga masih pemula alias masih newbe hehehe. Mau mempunyai menu dropdown seperti ini, ini fungsinya untuk memudahkan pengunjung supaya tau isi dari menu Anda. Contohnya pada gambar tanpa diklik menu Semester akan keluar atau menjulur ke bawah seperti pada gambar diatas dan banyak lagi fungsinya. Sekarang saya akan menjelaskan sedikit teknik untuk membuat menu dropdown yang mungkin agak menarik. Ayo ikuti tutorial berikut ini:
1. Login ke blogger, Dasbor pergi ke>> Rancangan>>Edit HML.
2. Centang Expand Template Widget.
3. Anda juga perlu untuk membackup template asli anda terlebih dahulu dengan Download Template Lengkap dan memilih simpan/save dan menyimpannya pada hard disk. Cadangan ini akan bermanfaat jika ada yang tidak beres dengan langkah2 yang anda kerjakan.
4. Cari kode : ]]></b:skin>
Kalau sulit bisa dengan cara cepat saat pencarian yaitu dengan tekan CTRL F/F3.
5. Letakkan kode dibawah ini diatas kode tersebut.
#navdropdownmenu{
background:black; /*Warna Latar Belakang */
width:950px;
height:auto;
margin:0;
padding:0;
}
#navdropdownmenu ul{
float:left;
list-style:none;
margin:0;
padding:0;
}
#navdropdownmenu li{
list-style:none;
float:left;
}
#navdropdownmenu li a, #navdropdownmenu li a:link, #navdropdownmenu li a:visited{
color:yellow; /* Warna Teks */
display:block;
padding:9px 10px 9px 10px;
font-size: 12px; /* Ukuran Teks */
font-family: verdana; /* Jenis font */
text-decoration:none;
}
#navdropdownmenu li a:hover{
background:yellow; /* Warna latar saat kursor mouse berada di atasnya undefinedhover) */
color:blue; /* Warna teks saat kursor mouse berada di atasnya */
}
#navdropdownmenu li ul{
z-index:10;
position:absolute;
height:auto;
width:200px; /* Lebar submenu */
visibility:hidden;
}
#navdropdownmenu li ul li a, #navdropdownmenu li ul li a:link, #navdropdownmenu li ul li a:visited{
float:none;
background:black; /* Warna latar belakang submenu */
width:180px; /* Lebar submenu. Isi dengan nilai yang sama */
border-width:1px; /* Tebal garis pinggir submenu */
border-style:solid;
border-color:#ffff66; /* Warna garis pinggir submenu */
}
#navdropdownmenu li ul li a:hover{
background:yellow; /* Latar belakang submenu ketika kursor mouse berada di atasnya */
color:black; /* Warna teks submenu ketika kursor mouse berada di atasnya */
}
#navdropdownmenu li:hover ul{
left:auto;
visibility:visible;
}
Anda bisa merubah atau mengedit kode CSS yang ditunjukkan warna merah sesuai dengan kondisi template anda.
6. Kemudian cari kode: <div id='header-wrapper'>
7. Masukkan kode dibawah ini sebelum kode berikut:
<li><a href='http://mas-debby.blogspot.com/2010/12/teknik-komputer_14.html'>Home</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/mata-kuliah_08.html'>Mata Kuliah</a></li>
<li><a href='http:/mas-debby.blogspot.com/2010/12/semester.html'>Semester</a>
<ul>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-i-1st.html'>Semester I / 1st</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-ii-2nd.html'>Semester II / 2nd</a></li>
<li><a href='http://mas-debby.blogspot.com/2010/12/semester-iii-3rd.html'>Semester III / 3rd</a></li>
</ul>
</li>
<li><a href='http://mas-debby.blogspot.com/2010/12/software.html'>Software</a></li>
<li><a href='http://mas-debby.blogspot.com/2011/01/kode-warna-html.html'>Kode Warna Html</a></li>
</ul>
8. Lalu ganti warna merah dengan link anda dan warna hijau dengan judul link anda OK. Anda bisa mengkondisikan dengan posisi dimana Anda akan taruh menu dropdownnya. Biasanya menu normal Anda adalah Anda cari kode Home dan urlnya di Edit HTMLnya kemudian Anda ganti dengan kode diatas.
9. Jangan Lupa Simpan Template. Semoga berhasil kalau masih bingung Anda boleh kirim komentar dibawah ini Mas Debby akan bantu.
37 komentar:
mas.kode div id='header-wrapper' tidak saya temukan.
ada alternatif lain?
info anda sangat membantu.
salam
@Abu Hanan
Bang kalau saya cek di blog Anda coba cari kata Beranda atau
Rasulullah dan Pengikutnya atau
Orang Tua atau
Hukum atau
Sains pada menu Rancangan Edit HTML
Itu pasti dalam satu kesatuan.
Kalau masih bungung cari kode yang mirip dengan
<li><a href='http://isyfatihah.blogspot.com/'>Beranda</a></li>
Lalu Anda hapus dan ganti dengan kode yang saya berikan.
Jika sudah ketemu/belum silahkan berkomentar kembali...
bang kode div id='header-wrapper' itu tidak bisa saya temukan... im a newbie teknik-unrika.blogspot.com tolong yah gan...
gan memperbesar tulisan posting gimana gan?
@Ilmu-Teknik
Kalau saya lihat dari blog Anda. coba Anda cari kode berikut pada rancangan edit html.
<li><a href='http://teknik-unrika.blogspot.com/'>Beranda</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/daftar-isi.html'>Teknik Mesin</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/daftar-isi_15.html'>Daftar Isi</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/free-software.html'>Free Software</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/pasang-iklan.html'>Pasang Iklan</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/trik-tips.html'>Trik & Tips</a></li>
<li><a href='http://teknik-unrika.blogspot.com/p/request.html'>Request</a></li>
Kedimudian Anda ganti kode diatas dengan code yang saya berikan yang di bawah <div id='header-wrapper'>
Ok semoga berhasil dan kalau ingin memperbesar tulisan posting Anda bisa lakukan pada menu posting yang Anda liat di metu tulis bukan edit html yang bergambar T disamping font. Semoga berhasil silahkan berkomentar kembali...
kode yang serupa dgn
li a href http isyfatihah blogspot com Beranda ali
tidak saya temukan begitu juga div id =header *** tidak ketemu juga.
@Abu Hanan Abdullah
Masa belum ketemu bang,,,wah ga mngkin itu soalnya sudah saya cek,,yg lain aja berhasil...
kurang teliti?okelah,,,
lantas utk membedakan komen admin dengan pengunjung gimana mas?
mas,yang mendekati ;
1.li a expr:href='data:link.target' data:link.name a li
2.li a expr:href='data:i.userUrl' data:i.display-name a li
mana satu yang bisa dipakai?
@Abu Hanan Abdullah
Coba Anda pilih yang dibawah_y ada kode <li><a href='http://isyfatihah.blogspot.com/p/rasulullah-dan-pengikutnya.html'>Rasulullah dan Pengikutnya</a></li>
sudah saya coba tapi hasilnya nihil
berikut HTMLnya
ul id='navdropdownmenu
li a href='http://isyfatihah.blogspot.com/hukum.html'hukum a li
li a href='http://isyfatihah.blogspot.com/2011/03/islam-3al-quran-sebagai-sumber-hukum.html'Al Quran a li
li a href='http://isyfatihah.blogspot.com/2011/03/islam-1sebuah-pengenalan.html Mengenal Hukum Islam a li
ul
yang diatas b skin uda di paste,sorot seperti pny anda blm bisa.
walah,,,
@Abu Hanan Abdullah
Masa ga bisa,mnk Anda dapet template dari mna??
Coba cari template yang CSS_y lebih komplit di blogtemplate4u.com
meluncur TKP....
template saya bawaan waktu pertama nge-blog.beberapa trik pernah saya coba tapi si penulis trik ada yang bilang "bisa jadi versi bloggernya berbeda,jadi jangan menyerah".
@abu hanan
Sipz2...tetap semangat??
haaah...cape di mata akhirnya.
sementara sambil berburu Knock Down,alangkah baiknya jika berbagi membedakan komen admin seperti punya anda hehehe....biar gak jenuh utek2 html.
Sekalian membuat huruf agak kecil utk menu sidebar (kalo di blog saya seperti Banyak Diabaca dll (ke bawah),,
pelajaran siap dimulai...
@Abu Hanan Abdullah
Klo tuk membedakan admin sma para kementar pndatang itu dari template_y bang??jadi untuk cara_y saya blum mnemukan..ntar saya posting klo sdah mnemukannya?ok...
siap,,,,,
Template saya pake Harbor,kira2 kalo dirubah ke templatr yang gak minim bisa/tdk ya?
@abu hanan
Bisa aja mas yang pnting mah didukung oleh blogger..saya sarankan untuk cari template di blogtemplate4u.com
ah,akhirnya nemu deh 3 kolom,,,,dengan kasus :
1.jarak antara posting dengan kolom komentar terlalu jauh,dan saya ingin persempit.
2.di bawah posting ada kolom besar,yang saya ingin kecilkan.
3.default width itu 1200,lantas saya buat 900.hasilnya bisa muat tetapi "bodi" masih besar sehingga melebar.
Tindakan apa yang diperlukan mas?
eh,yang nomor 4....terima kasih banyak.
salam
Hatur thank you kang !
@Sukawangi Viil
Yo ngatur thank you sanget...
mas, cra naro mnu dropdown di tempale mas deby gmna, sy jugakn pakai templete sama dengan mas deby, tapi sy ga bsa naro menu dropdown'a, mohn bantuanya....
@AnonimKlo emang template_y sma kaya punya saya tinggal ikuti aja langka2h diatas mas??
Gan,klo tmplate wordpress bisa nggak dipakai buat blogger....!
tolong infonya gan..!
maklum masih pemula...:D
kok g ada perubahan ya mas bro,q dah naruh menu yabg mas bro tulis di atas tdi,newbie ni heheehe mohon pejelasan lebih lanjut
gmna crax bwt menux,,alx kode div id='header-wrapper' gk ketemu...mhon bantuanx
kok punyaku ngga mau ya? semuanya udah aku ikutin dgn teliti sampe ngerjainnya sejaman.... Uda berhasil, tapi waktu aku liat, ngga ada... Capeee :(
Q ga bisa maz, tlong dibntu yea. . .
ud q samain persis tu, tp kok mlah jdnya kyak page, wew
@Wonderland infoKlo ga berhasil berarti ga cocok mas m templatenya??
sukses selalu mas, mantap menu dropdown ,tapi saya bingung cara membuat posting untuk di taruh di menu dropdown,
MAS saya kan sudah buat menu dropdown tapi blum bsa seperti contoh yang diatas sendiri ,.,,.pertanyaan saya gimana caranya memasukan artikel ke menu dropdown
saya kok ga bisa yaaa bng buat drop down nya ga ketmu header wrapper'a gan
mas aku kok nggak bisa ya buat dropdownnya... sudah aku coba, malah menuku double2. mohon bantuanya ya...tq
mas, sebenarx klo gk menu dropdown di bagian laman itu lebih mudah. Bisa sesuai dengan templatex
gan cara sendirikan dropbos klu software githu y apa sendirikan nya . .
kalau di wordpress apa skripnya??
Terima kasih atas artikelnya.
sepertinya anda berbakat untuk urusan membuat postingan yang ini, jujur saja kamu punya kelebihan tersendiri, dan saya akan berkunjung lagi bila ada waktu.
#Semoga sehat selalu :D
Posting Komentar