oleh

Cara Membuat Menu Dropdown di Blogger, Agar Tampilan Blogmu Profesional!!!

Cara Membuat Menu Dropdown di Blogger, Agar Tampilan Blogmu Profesional!!!

Cara Membuat Menu Dropdown di Blogger, Agar Tampilan Blogmu Profesional!!!
Cara Membuat Menu Dropdown di Blogger, Agar Tampilan Blogmu Profesional!!!

Ingin mempunyai menu dropdown ketika dipilih muncul sub-menu yang lain? ya menu seperti itu namanya menu Dropdown, lantas apa itu Dropdown, Dropdown adalah Menu yang bisa menurunkan sub-menu ditempat yang sama atau kita bisa menyebutnya menu menurun.

Manfaat dan Fungsi Dropdwon ini bisa kita bisa mengkategorikan artikel-artikel kita kedalam menu, misalnya saperti yang ada di blog ini, ketika kita memilih menu Blogger, maka akan keluar sub-menu lainnya seperti Tips Blogger, Tips Adsense dan Template hal ini bisa membuat jumlah menu menjadi rapih dan tidak terlalu panjang.

Lantas Bagaimana cara membuat menu seperti itu?

Cara Membuat Menu Dropdown di Blogger Dengan Mudah:

  • Langkah pertama kamu harus Login Blogger
  • Pilih Tema atau Template
  • Kemudian pilih Edit HTML
  • Setelah langkah diatas di ikuti,
  • selanjutnya cari kode ]]></b:skin>
  • untuk lebih mudah kamu bisa menggunakan Ctrl+F
  • Selanjutnya Copy kemudian Paste kode dibawah ini tepat diatas kode ]]></b:skin>
#mbtnavbar {
background: #060505;
width: 960px;
color: #FFF;
margin: 0px;
padding: 0;
position: relative;
border-top:0px solid #960100;
height:35px;
}
#mbtnav {
margin: 0;
padding: 0;
}
#mbtnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#mbtnav li {
list-style: none;
margin: 0;
padding: 0;
border-left:1px solid #333;
border-right:1px solid #333;
height:35px;
}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
#mbtnav li a:hover, #mbtnav li a:active {
background: #BF0100;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 10px 12px;
}
#mbtnav li {
float: left;
padding: 0;
}
#mbtnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#mbtnav li ul a {
width: 140px;
}
#mbtnav li ul ul {
margin: -25px 0 0 161px;
}
#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {
left: -999em;
}
#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {
left: auto;
}
#mbtnav li:hover, #mbtnav li.sfhover {
position: static;
}
#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {
background: #BF0100;
width: 120px;
color: #FFF;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border-bottom:1px dotted #333;
}
#mbtnav li li a:hover, #mbtnavli li a:active {
background: #060505;
color: #FFF;
display: block; margin: 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
}
  • Setelah kode tadi di Pastekan, kemudian Save atau Simpan
  • Langkah selanjutnya kamu Pilih Tata letak > Tambah Gadget > HTML/JavaScript pada menu Blogger kamu
  • Selanjutnya Copy dan Paste kode dibawah ini di HTML/JavaScript tadi
<div id='mbtnavbar'>
<ul id='mbtnav'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>Sitemap</a>
<ul>
<li><a href='#'>Sub Page #1</a></li>
<li><a href='#'>Sub Page #2</a></li>
<li><a href='#'>Sub Page #3</a></li>
</ul>
</li>
</ul>
</div>

 

Setelah selesai Save atau Simpan

NOTE: Untuk mengubah link pada Dropdown, ubah kode # menjadi link Label Blog kamu.

Demikian artikel tentang cara membuat Dropdown atau menu menurun otomatis, semoga artikel ini bermanfaat dan berguna bagi kamu yang sedang belajar nge-blog, akhir kata selamat mencoba dan terima kasih sudah berkunjung.

Silahkan Kritik dan saran jika terdapat kesalahan dalam tutorial tersebut. (Re/JUNI)

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *