Halo sobat media2give,jumpa lagi nih dengan kalian di postingan ini ^^ Pada postingan sebelumnya saya sudah membahas Cara Mengetahui Nama Template Blog Lain,kali ini giliran pembahasan tentang Cara Mudah Membuat Menu Dropdown Blog.Apa sih dropdown itu? buat blogger yang udah lama ngeblog pasti nggak asing nih dengan istilah dropdown,tapi buat yang baru awal terjun ke dunia blog mungkin masih bingung tentang dropdown menu ini.
Okelah,saya jelaskan dulu tentang dropdown menu ini.Jadi,dropdown menu itu adalah sebuah sebuah tab yang isinya berupa navigasi unik.Letaknya ada di bagian atas,biasanya di bawah header blog.Dropdown ini fungsinnya untuk mempermudah pengunjung blog mengetahui apa saja menu konten yang disajikan di blog tersebut,karena pada tiap tab-nya berisi link yang mengarah ke menu sesuai yang ditampilan pada blog itu.
Jika menu dropdown ini kita sorot dengan kursor,maka akan muncul menu lain di bawahnya yang disebut dengan submenu.Misalkan saja dengan menu Sport > submenu-nya Balap,Bola,Basket.Pengaturan berapa banyaknya submenu yang akan tampil,bisa kita sesuaikan sendiri dengan mengubah kode htmlnya.
Jika tidak ingin memakai sub menunya,ya tinggal di hapus saja kode untuk submenunya,jadi penggunaannya cukup mudah.Kita hanya perlu mengerti kode tag awal dan penutupnya saja untuk menghapus kode yang tidak di inginkan.Trus,gimana cara menambahkan dropdown menu di blog? Untuk caranya,silahkan saja disimak langkah-langkahnya berikut ini :
1. Login Blog kalian
2. Masuk ke menu Template > edit HTML
3. Cari kode ]]></b:skin>
4. Letakkan kode di bawah ini tepat diatas kode ]]></b:skin> tadi
#menuwrapperpic{background:url(http://2.bp.blogspot.com/-JPJ3cttk3UY/UgeTkhCCRsI/AAAAAAAABXw/vqWVpbMg5-g/s1600/menu1.PNG) repeat-x top;width:980px;margin:0 auto;padding:0 auto;}
#menuwrapper{width:980px;height:35px;margin: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:bold 12px Arial;text-transform:none;color:#fff;padding:6px 10px 6px;background:url(http://4.bp.blogspot.com/-Poe1DlFFJDI/T35TYW15bFI/AAAAAAAAF6M/XklwYDShSVM/s1600/nav.png) repeat-x;margin:8px 0 8px 5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;border:1px solid #555;text-shadow: 0 1px 1px #0e3d68;}
#menubar a:hover{background:url(http://4.bp.blogspot.com/-EkPPCTlSFrE/TeCqa9ww_AI/AAAAAAAAAwU/H3xUv6nyoPw/s1600/nav.png) repeat-x}
#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;-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{color:#80C8FE}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#fff;background:url(http://2.bp.blogspot.com/-JPJ3cttk3UY/UgeTkhCCRsI/AAAAAAAABXw/vqWVpbMg5-g/s1600/menu1.PNG);text-decoration:none;margin:0;-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:0px solid #04498a}
#menubar li ul li.hr{border-bottom:1px solid #fff;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0}
#menubar ul a:hover{background-color:#555!important;color:#80C8FE!important;text-decoration:none}
5. Cari kode <!– /content-wrapper–>
6. Letakkan kode di bawah ini tepat dibawah kode <!– /content-wrapper–> tadi
<div id=’menuwrapperpic’>
<div id=’menuwrapper’>
<ul id=’menubar’>
<li><a href=’/’><img border=’0′ src=’http://1.bp.blogspot.com/-hOrRvLeBQYM/T_WSzbGC7vI/AAAAAAAAHPw/S_2CUG0zZhk/s1600/home_white.png’ style=’padding:0px;’/></a></li>
<li><a href=’#‘>About Us</a></li>
<li><a href=’#‘>Contact Us</a>
<ul>
<li><a href=’#‘>Goggle +</a></li>
<li class=’hr’/>
<li><a href=’#‘>Contact on Facebook</a></li>
<li class=’hr’/>
<li><a href=’#‘>Contact on Twitter</a></li>
</ul>
</li>
<li><a href=’#‘>Menu 1</a></li>
<li><a href=’#‘>Menu 2</a></li>
<li><a href=’#‘>Menu 3</a>
<ul>
<li><a href=’#‘>Sub Menu 1</a></li>
<li class=’hr’/>
<li><a href=’#‘>Sub Menu 2</a></li>
<li class=’hr’/>
<li><a href=’#‘>Sub Menu 3</a></li>
</ul>
</li>
<li><a href=’#‘>Menu 4</a></li>
<li><a href=’#‘>Menu 5</a>
<ul>
<li><a href=’#‘>Sub menu 1</a></li>
<li class=’hr’/>
<li><a href=’#‘>Sub Menu 2</a></li>
<li class=’hr’/>
<li><a href=’#‘>Sub Menu 3</a></li>
</ul>
</li>
</ul>
<br class=’clearit’/>
</div>
<div style=’clear:both;’/>
</div>
7. Klik Simpan
8. Jika tidak ketemu kode <!– /content-wrapper–>,carilah kode yang mirip dengan <!– /content-wrapper–>
9. Ganti tulisan menu dengan menu yang ingin kalian tampilkan.Ganti juga sub menu sesuai keinginan,dan terakhir,ganti kode # dengan url tujuan jika menu/submenu tersebut di klik.
cara buat urlnya gimana??
@asmara dhahana
urlnya nggk perlu dibuat,kan sdh ada.. coba di klik kanan,buka tautan di tab baru.. nanti muncul urlnya
oh , jadi jika kita membuat sub menu dengan nama "Kamen Rider Faiz" otomatis /blogger nya mencari kata "Kamen Rider Faiz" gitu
@asmara dhahana
nanti di masukkin dulu urlnya yg mengarah ke label Kamen Rider Faiz,baru klo udh jadi,di klik akan menuju ke semua artikel yang memakai label Kamen Rider Faiz.