Cara Membuat Menu DropDown tanpa Edit HTML


Membuat Menu DropDown  untuk blog Sobat Blog Blogger tidak memerlukan  Edit HTML, karena jika diterapka menggunakan Etit HTML, agak ribet untuk  Blogger pemula. Adapun menerapkan menu drop down ini cukup melalui tambah gadged baru pada Dashboard Blog Sobat Blogger. Lihat seperti gambar di bawah: Latar belakang, border menu ini bisa Sobat rubah dan font yang diinginkan.

Adapun craranya: Sobat harus masuk terlebih dahulu ke Blog Blogger untuk menambah gadget baru, lalu klik Design di halaman Blog Blogger, akan mengarah ke Page Element atau Add and Arrange Page Element. Setelah itu Sobat
akan melihat Add a Gadget, lihat seperti gambar di bawah

Klik Add a Gadget tersebut, yang muncul seperti contoh gambar di bawah

Klik lagi pada area HTML/JavaScript, untuk mengeluarkan halaman Configure HTML/JavaScript, lihat gambar bawah: jangan lupa ketik Judul Gadget, agar mudah bila Sobat ingin mengedit ulang Gadget tersebut.

Lihat kode HTML/JavaScript di bawah: Copy dan Paste pada “Content” untuk HTML/JavaScript seperti gambar di atas, klik Save lihat hasilnya,,,,,,,,

<style>
#mbtnavbar {
background: #3B5998;
width: 87%;

color: #FFF;
margin: 10px 0;
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;

}
#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {
color: #FF0000;
display: block;
font:bold 12px Helvetica, sans-serif;
margin: 0;
padding: 9px 12px 11px 12px;
text-decoration: none;
border-right:0px solid #627AAD;

}
#mbtnav li a:hover, #mbtnav li a:active {
background: #627AAD;
color: #FFF;
display: block;
text-decoration: none;
margin: 0;
padding: 9px 12px 11px 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: #EDEFF4;
width: 120px;
color: #3B5998;
display: block;
font:normal 12px Helvetica, sans-serif;
margin: 1px 0 0 0;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;

-moz-border-radius:4px;
-webkit-border-radius:4px;

}
#mbtnav li li a:hover, #mbtnav li li a:active {
background: #627AAD;
color: #FFF;
display: block;

}

#mbtnav li li li a, #mbtnav li li li a:link, #mbtnav li li li a:visited {

background: #EDEFF4;
width: 120px;
color: #FF0000;
display: block;
font:normal 12px Helvetica, sans-serif;
padding: 9px 12px 10px 12px;
text-decoration: none;
z-index:9999;
border:1px solid #ddd;
margin: 1px 0 0  -14px;

}
#mbtnav li li li a:hover, #mbtnav li li li a:active {
background: #627AAD;
color: #FFF;
display: block;
}

</style>
<div id=’mbtnavbar’>
<ul id=’mbtnav’>
<li>
<a href=’#’>Home</a>
</li>
<li><a href=’https://readmoremyblog.wordpress.com/2012/02/19/beranda/’>About</a&gt;
</li>
<li>
<a href=’#’>Page ▼</a>
<ul>
<li><a href=’https://readmoremyblog.wordpress.com/’>READ MORE MY BLOG</a></li>
<li><a href=’https://readmoremyblog.wordpress.com/2012/04/05/cara-menautkan-link-blog-di-gravatar-profile/’>Gravatar Profile</a></li&gt;
<li><a href=’https://readmoremyblog.wordpress.com/cara-posting-baru-di-wordpress/’>Cara posting baru di WordPress</a>
<ul>
<li><a href=’#’>Sub Sub Page #1</a></li>
<li><a href=’#’>Sub Sub Page #2</a></li>
<li><a href=’#’>Sub Sub Page #3</a></li>
></ul></li></ul></li></ul></div>

Semoga dapat berfungsi

2 thoughts on “Cara Membuat Menu DropDown tanpa Edit HTML

Tinggalkan Balasan

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s