Home »
tips dan trik blog
» Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header
Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header
den zuaz | 23.49 | 113comments
Salam blogger, Kali ini saya sedikit berbagi tentang Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header yang telah di request oleh sahaba-sahabat Zuaz'Z Creator pada halaman Facebook.
Menu drop down dapat kita pasang di atas maupun di bawah nama blog, dengan memasang menu semacam ini tampilan blog kita semakin tampak bagus dan pastinya akan mempermudah pengunjung untuk mencari apa yang dibutuhkan dari blog kita.
Untuk demonya silakan sobat blogger klik link berikut ini DEMO. Bagi sobat blogger yang berminat memasang menu semacam ini silakan ikutu langkah-langkah berikut ini:
Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header:
1. Seperti biasa sobat harus login dulu di akun blog sobat
2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan
3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan
4. Sobat cari kode ]]></b:skin> dan letakkan kode berikut tepat di atas kode ]]></b:skin>
Klik show untuk melihat
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiz2Xurh19JQ9JUuiw26kNWnLAzyrNdllY9ERh4o3LJB-e8rdVcweRdEBK51MF82Osg5wo8oy0Y4qOA3BKs39r0UCDHkbLltWnvpFMh8MY-NceoFrFXPnTq0xBI9zYGZkNhWAfXB3KwnHU/s1600/menubar.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;height:35px;margin:0 auto}
.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
.clearit{clear:both;height:0;line-height:0.0;font-size:0}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;color:#CECECF;border-right:1px solid #191919;padding:12px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpoI1WbQolS5dJBwn3_fzjOleKVJdFkDKU-jxc2kADxGfpTwxbsIzouvA0bgAT8X2nU9nZ_fAZtj0SwbnEz-w85Bt4wR69VUZcB8wPwhwEsNeud3E8lvivbNZNqQ0v4mXkUrrlgmZ8BW8/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:12px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
#menubar li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
Selanjutnya sobat blogger cari kode berikut:
<header> : untuk menempatkan menu di atas nama blog
</header> : untuk menempatkan menu di bawah nama blog
Copy kode di bawah ini dan letakkan tepat di atas kode <header> atau di bawah kode </header>
Artikel Cara Membuat Menu Drop Down Di Atas Header Atau Di Bawah Header ini diposting oleh den zuaz. Terimakasih atas kunjungan Sobat serta kesediaan Sobat membaca artikel ini. Kritik dan saran dapat Sobat sampaikan melalui kotak komentar. Apabila Sobat berminat silakan copy paste artikel ini dan mohon untuk mencantumkan sumbernya dengan menyertakan script di bawah ini:
Mohon maaf apabila komentar Sobat dari Facebook tidak bisa saya jawab semua, dikarenakan sulit untuk memoderasi komentar dari Facebook, bila sobat ada pertanyaan yang ingin lansung saya jawab, silakan Sobat berkomentar dari id Blogger.
@_Nur Aiydha: Bukan sob,, kayak menu di blog saya satunya,, kalo seperti blog ini saya coba di template lain tidak berhasil terkunci tetap di atas seperti di blog saya ini,, maaf belum dapat solusinya,, masih saya coba-coba,, ^_^
salam gan, kok ga bisa sih gan, muncul kalimat ini "Kesalahan saat mengurai XML, baris 708, kolom 3: The element type "div" must be terminated by the matching end-tag "". terima kasih....
@_Troy Anak Lugu: Melihat blog sobat sepertinya dengan template standar, tidak terjadi masalah bila di masukan kode tersebut sob, Mohon dicoba lagi,, ^_^
@_Nurul Arifin: Blog sudah jadi sob.. template sudah saya ganti,, silakan sobat sesuaikan sendiri URL menu drop downnya,, Sebab itu menu dropdown blog saya,, blog tidak sama persis,, tapi menggunakan template yg sama,, Silakan berkreasi sesuai selera sobat,, ^_^
gan saya mau nanya... kok pilihan dop drown yg search pnya saya gak bisa dibuka/berfungsi ya... malah turun ke bawh dia, jdi gmna cara memperbaikinya tu gan? tolong di jawab
@_Raymond Damson: Coba di ubah ukuranya Sob,, pada kode width:170px dirubah ukuran lebih kecil,,
sobat enggunakan efek anti copy paste tidak,,? bila sobat menggunakan efek anti copas memang kolom searching pada menu saya tidak berfungsi,, coba saja lihat demonya pada blog uji coba saya,,
saya gak makai efek copas sob... dan sdah coba saya ubah ukurannya tapi tetap gak mau... bisa tolong dilihat gak sob trus kasih tau saya alamatnya artc-remaja.blogspot.com tolong bget ya sob, saya gak ngerti takut makin kacau
sudah saya ulang mas, tapi tetap gak bisa... boleh minta tolong perbaikin gak mas? kalau boleh nanti saya kirim ke alamat email mas, email dan pasword blogger saya nya? gmna mas, bisa gak nolongin?
gan gimna cara mbentangin/manjagin tu menu? sama cra gabungin postingan biar jd 1 menu/tampilan? kyak punya ente tu, misal tips dan trik bila diklik muncul beberapa postingan (1paket) Cara Aktifkan Game Standard / Default Window 7 Keterangan Fungsi Tombol Shortcut "F" Pada Windows Keterangan Fungsi Tombol Shortcut "F" Pada Windows newbie ni, mintol ea gan.mksih sblmnya
makasih gan infonya, tapi sy mo tanya Gimana jadinya kalo yg warna merah dan kuning gak sy ganti? trus apa sih yg dimaksud url tujuan itu. Maklum pemula gan.. tolong info pencerahanya...
thnks mas bro,,,soalnya saya telah berhasil mempraktekkannya,,,salam kenal dan salam persahabatan selalu. oya klo ad waktu,,silahkan berkunjung ke blog ane,,
selamat malam mas... saya mau nanya nih... gimana sih cara membuat menu dropdown sekali klik saja seperti di menu dropdown mas zuaz yg pi;ihan nya tukar link dan yang kebijakan itu? di jawab ya mas...
gini gan,kan saya sudah bikin menu-menu sesuai dengan artikel agan punya tu di atas,trus yg saya bingungkan gmna caranya untuk memasukan materi-materi ke dalam menu-menu yang telah saya buat,misalkan kalau kita klik home akan kluar materi home,kita klik lagi info keluar materi info.dan saya masih bingung bagaiman untuk menmpatkannya.mksh
utk yg di atas: loh sob... tuh bukannya tinggal pake label gitu.... setiap postingan kita diberi label utk masing-masing materi yg berbeda, di situ kan kita masukin alamatnya dari blog yg telah ter-label gitu... jadi, kalo klik info nanti bakalan keluar postingan materi info yg telah ter-label info..
@_MauLana AL FajRiN: Untuk menentukan posting yg tampil sobat sebelumnya harus menentukan kategori labal setiap postingan,,
dan untuk menentukan jumlah postingan yg akan muncul sobat tambahkan ?max-results=7 pada akhir URL label,, berikut contoh URL label Computer pada blog saya: http://zuazz.blogspot.com/search/label/computer?max-results=7 7 adalah jumlah postingan yg akan tampil,,
Mohon maaf Bagi Sobat yg komentarnya saya hapus, karena menyertakan link pada komentar, sudah saya sediakan media untuk bertukar link, jadi jangan menyertakan link pada komentar,, Terimakasih,, ^_^
alhamdulillah berhasil sob.. p klw kita mau masukan lebih bnyak artikel, entri atau post kedalam sub menu gmn cara'a..?? maaf bnyak tnya mklum msih newbie.. hehe THANK u
Met pagi gan saya mau nanya nih,,,gimana ya caranya bikin menu dropdown kayak punya agan yang nempel di navbar dan kalau cursor digerakkan menunya tidak ikut bergerak. tolong bagi ilmunya dung,,,alnya saya nanya ama om google nggak nemu2 nih,,,di tunggu ya info nya. thnks salam persahabatan selalu ya
saya kan download templatenya, terus dan ada menunya dari sananya,, gimna cara ngeditnya, supya sesuai keinginan kita, aku dah coba otak-atik tapi gak berhasil, mohon bantunanya,, terima kasih
mas saya mau tanya dong kalo kira2 kode biar bisa lagi menunya ada cabangnya lagi gitu gmn ya?
kan kode diatas cuma ada home,tentang admin, contact us (google+, myspace, twitter, facebook) , creater , tips dan trik ( komputer, blogspot, dll) , kategori ( tv online , komputer ,dll).
nah yang mau saya tanyakan itu gmn kalo mau dibikin lg cabangnya misal kategori - komputer - software - microsoft - 32bit,64bit
soalnya kan itu kodenya cuma buat kategori ( tv online, komputer , dll)
ga kayak kategori (tv online, komputer ( microsoft (32bit, 64bit)linux, dll)
nah komputernya itu dibuat cabang lagi ato yang lainnya. makasih sebelumnya
sangat bermanfaat gan... tpi saya mau nanya gan bagaimana cara buat menu bar seperti agan, ketika di klik menu barnya tetap ada gak berpindah tpi isi blognya aja yg pindah..
Luangkanlah Sedikit Waktu Sobat Untuk Memperindah Blog Ini Dengan Berkomentar,, (^_^)
PERINGATAN,,!!! Bagi Sobat Yang ingin berkomentar, mohon sesuaikan dengan tema pada postingan, dan saya mohon untuk tidak mencantumkan link (URL) pada komentar karena akan saya anggap spam dan mohon maaf apabila saya hapus komentar Sobat,,!!!
113 Komentar Sahabat
