Ribet juga kan kalau di blog kalian punya banyak menu yang ingin ditampilkan tetapi hanya ada sedikit space untuk menampilkan menu tersebut. Dengan menjadikannya per kategori dan menampilkan bentuk dropdown seperti di blog ini akan menyelesaikan masalah tersebut.
Berikut langkah-langkah untuk membuatnya :
Berikut langkah-langkah untuk membuatnya :
1. Log in di blogger lalu masuk "Layout"---->"Edit HTML" lalu jangan lupa centang kotak "Expands Template Widgets" dan klo bisa back up dulu templatenya biar g terjadi sesuatu yang ngga diinginkan..
2. Cari kode ini ]]> lalu setelah itu simpan kode di bawah ini tepat diatas kode tadi :
/* Dropdown Menus PR */
#page-bar li {
float: left;
margin: 0px;
padding: 0px;
}
#page-bar li li {
float: left;
margin: 0px;
padding: 0px;
width: 122px;
text-transform:none;
}
#page-bar li li a, #page-bar li li a:link, #page-bar li li a:visited {
background: #2B2B2B;
width: 122px;
float: none;
margin: 0px;
padding: 5px 10px 5px 18px;
border-top: 1px solid #C0C0C0;
}
#page-bar li li a:hover, #page-bar li li a:active {
background: #666666;
padding: 5px 10px 5px 18px;
}
#page-bar li ul {
position: absolute;
width: 10em;
left: -999em;
}
#page-bar li:hover ul {
left: auto;
display: block;
}
#page-bar li:hover ul, #page-bar li.sfhover ul {
left: auto;
}
3. Cari kode tab menu yang ada di blog kamu, Misal saya ambil untuk contoh yang gambar di atas :
kode diatas adalah "Menu Utamanya"..
4. Nah, untuk membuat turunannya, yang harus kamu lakukan terlebih dahulu adalah menyiapkan link turunannya dengan menggunakan class='cat-item' contoh :
"Klo kamu pengen turunannya lebih dari satu maka kamu siapkan semua link turunannya, mau satu atau lebih dari satu atau berapa pun..pokonya terserah kamu..yang penting siapin dulu aja link turunannya"
5. Klo semua link turunannya sudah siap, maka langkah selanjutnya yaitu kamu tinggal menggabungkan "Menu Utama" dengan " Link Turunannya", caranya :
Klo link turunannya lebih dari satu, maka tinggal tambahkan aja menjadi :
Keterangan :
- Warna hitam adalah kode dari "Menu Utamanya"
- Warna merah adalah untuk membuat menu menjadi dropdown
- Warna Biru adalah kode dari "Link Turunannya"
- Warna Merah tua adalah kode tambahan jika kamu ingin memasukkan turunan lebih dari satu
- Khusus Warna Orange klo kamu perhatikan itu letaknya hanya dipindahkan saja, liat di "Menu Utama" lalu menjadi disimpan di bagian akhir.
Bingung y kebanyakan warna..he3.
6. "Udah deh" tinggal di "SIMPAN TEMPLATE"
coba liat hasilnya, udah ada belum turunannya..he3..
Must Remember :
"Trik ini hanya akan berguna buat kamu yang sudah memakai "Tab Menu" di blognya, jika belum memakai tab menu, maka trik ini g akan bisa dipakai"
0 Response to "Cara Membuat Menu Tab Dropdown"
Post a Comment
Tinggalkan komentar anda atas postingan di atas guna menyempurnakan dan membangun untuk kedepannya.