-->

Cara membuat menu Dropdown atau Menu Menurun otomatis di dashboard Blogger blogspot custom domain untuk Pemula

Cara membuat menu Dropdown atau Menu Menurun otomatis di dashboard Blogger blogspot custom domain 


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.

[caption id="" align="aligncenter" width="320"]Cara membuat menu dropdown untuk dashboard blogspot atau blogspot custom domain, source: kangsobar.com to Junipedia Cara membuat menu dropdown untuk dashboard blogspot atau blogspot custom domain, source: kangsobar.com to Junipedia[/caption]

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 dengan mudah, untuk membuatnya ikuti langkah-langkah dibawah ini:


[caption id="attachment_5583" align="aligncenter" width="300"]Cara membuat menu Dropdown atau Menu Menurun otomatis di dashboard Blogger blogspot custom domain untuk Pemula Cara membuat menu Dropdown atau Menu Menurun otomatis di dashboard Blogger blogspot custom domain untuk Pemula[/caption]

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 Blogger, akhir kata selamat mencoba dan terima kasih sudah berkunjung.

Silahkan Kritik dan saran jika terdapat kesalahan dalam tutorial tersebut