Halo sobat,... pada kali ini saya akan membagikan cara bagaimana membuat menu Drop Down pada blog kita.
meskipun saya sendiri masih belajar,tp mudah2an postingan ini bisa bermanfaat bagi sobat semua...langsung aja yuukk.......
yang harus sobat lakukan pertama yaitu membuat Menu Drop Down terlebih dahulu, tapi jika sobat udah ada menu drop downnya tinggal lanjutin aja ke langkah selanjutnya.
Cara membuat Menu Drop Down :
akan saya bagikan cara yang sangat mudah untuk membuat menu drop down, sobat hanya perlu memasukan 1 script ke TEMPLATE dan 1 script lagi ke bagian menu TATA LETAK :
(Untuk jaga-jaga silahkan unduh semua template sobat)
1. Login ke blog sobat->pilih Template->edit Html. lalu cari kode ]]></b:skin> (gunakan C+F untuk memudahkan pencarian.Setelah ketemu masukkan kode dibawah ini tepat diatas kode ]]></b:skin>.
#DropdownMenu {
background:#ff6803;
border-radius:6px;
width: 880px;
height: 35px;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
color:#FFFFFF;
font-weight: bold;
margin-bottom: 30px;
padding: 2px;
}
#Dropdownbox {
width: 875px;
border-radius:6px;
float: left;
margin: 0;
padding: 0;
}
#strike {
border-radius:6px;
margin: 0;
padding: 0;
}
#strike ul {
border-radius:6px;
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#strike li {
border-radius:6px;
list-style: none;
margin: 0;
padding: 0;
}
#strike li a, #strike li a:link, #strike li a:visited {
border-radius:6px;
color:#FFFFFF;
display: block;
font-size: 16px;
font-family: Georgia, Times New Roman;
font-weight: normal;
margin: 0;
padding: 9px 15px 8px;
}
#strike li a:hover, #strike li a:active {
border-radius:6px;
background:#FFFFFF;
color:#ff6803;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#strike li li a, #strike li li a:link, #strike li li a:visited {
border-radius:6px;
background:#ff6803;
width: 150px;
color:#FFFFFF;
font-size: 14px;
font-family: Georgia, Times New Roman;
font-weight: normal;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#strike li li a:hover, #strike li li a:active {
border-radius:6px;
background:#FFFFFF;
color:#ff6803;
padding: 7px 10px;
}
#strike li {
border-radius:6px;
float: left;
padding: 0;
}
#strike li ul {
border-radius:6px;
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#strike li ul a {
border-radius:6px;
width: 140px;
}
#strike li ul ul {
border-radius:6px;
margin: -32px 0 0 171px;
}
#strike li:hover ul ul, #strike li:hover ul ul ul, #strike li.sfhover ul ul, #strike li.sfhover ul ul ul {
border-radius:6px;
left: -999em;
}
#strike li:hover ul, #strike li li:hover ul, #strike li li li:hover ul, #strike li.sfhover ul, #strike li li.sfhover ul, #strike li li li.sfhover ul {
border-radius:6px;
left: auto;
}
#strike li:hover, #strike li.sfhover {
border-radius:6px;
position: static;
}
Untuk kode #ff6803 itu adalah warna orange yang menjadi warna background dari menu ini, silahkan diganti bila memang sobat ingin mengganti sesuai warna kesukaan sobat.
Untuk kode #FFFFFF itu adalah warna tulisan dari menu ini, silahkan diganti bila memang perlu. Untuk kode warna sobat bisa cari di Google.
jika sudah selesai klik simpan.
2. sekarang kita menuju TATALETAK->pilih tambah gadget->+html/javascript. lalu masukkan kode dibawah ini ke kolom yang telah disediakan.
<div style="border: 1px solid #CCC; margin: 10px 0px; padding: 10px; width: auto; height: auto; background-color:#00FFFF; text-align: Justify;">
<div id="DropdownMenu">
<div id="Dropdownbox">
<ul id="strike">
<li><a href="#">HOME</a></li>
<li>
<a href="#">DESAIN</a>
<ul>
<li>
<a href="#">Desain eksterior</a>
<ul>
<li><a href="#">Rumah Minimalis</a></li>
<li><a href="#">Rumah Simple</a></li>
<li><a href="">Landscape</a></li>
</ul>
</li>
<li><a href="">Desain Interior</a></li>
</ul>
</li>
<li><a href="#">Realistic Rendering</a></li>
<li><a href="#">Simple Rendering</a>
</li>
</ul>
<li>
<a href="#">VIDEO</a>
<ul>
<li>
<a href="#">My Chanel</a>
<ul>
<li><a href="">Dangdut</a></li>
<li><a href="">Koplo</a></li>
<li><a href="">
lain Lain</a></li>
</ul>
</li>
<li><a href="#">Aksi</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Tutorial</a></li>
</ul>
<li>
<a href="#">TRAVEL</a>
<ul>
<li>
<a href="#">Tiket
pesawat</a>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li><a href="#">Antivirus</a></li>
<li><a href="#">Games</a></li>
<li><a href="#">Lagu</a></li>
</ul>
<li>
<a href="#">TUTORIAL</a>
<ul>
<li>
<a href="#">Sketchup</a>
<ul>
<li><a href="">Mengenali Sketchup</a></li>
<li><a href="">Cara desain Rumah</a></li>
<li><a href="">Rendering</a></li>
</ul>
</li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Material</a></li>
<li><a href="#">Jaringan</a></li>
</ul>
<li>
<a href="#">Contact Me</a>
<ul>
<li>
<a href="#">Facebook</a>
<ul>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
<li><a href="#">Sub Sub Menu 2</a></li>
</ul>
</li>
<li><a href="#">Google+</a></li>
</ul>
</li>
</ul>
</div>
</div>
Sobat bisa ganti kata (Menu Desain) dengan kategori menu sobat, serta ganti kata (Submenu Desain Eksterior, interior, video,.dsb) dengan submenu sesuai dengan label kategori menu sobat.
untuk kode "#" slahkan ganti dengan alamat link sobat atau sesuai dengan link label sobat.
jika selesai klik simpan.
Nah....Bila Sobat melakukannya dengan benar, maka seharusnya tampilan menu akan seperti yang ada pada contoh. Namun bila berbeda, coba sobat perhatikan kembali langkah-langkah di atas.
Perhatikan gambar di bawah ini:
Sekarang Memasukkan Postingan kedalam kategori menu yang sudah sobat buat tadi.
1. Buat label pada tiap postingan sesuai dengan tema postingan sobat.
contoh : saya punya label 'Desain', seluruh postingan yang berisi tentang Desain/ekterior maupun Interior saya beri label Desain.
setelah itu sobat masuk tataletak->tambah gadget->pilih +label. atur settingan label lalu klik simpan. label akan muncul pada sidebar sobat. buka blog sobat lalu klik label 'Utility' yang ada pada sidebar blog sobat, sobat akan dibawa ke halaman yang berisi tentang Utility saja. copy URL yang ada pada bagian atas web browser sobat. lalu masukkan pada kategori menu yang ada dimenu drop down.
Taraa..........Selesai ^_^ menu sobat yang udah dikategorikan menurut label sudah tampil, silahkan di Cek dengan membuka blog sobat lalu klik kategori menu " Desain " ....
Sekian dulu Artikel saya yang sangat panjang kali ini, semoga bermanfaat dan Sukses
No comments:
Post a Comment