Cara Membuat Menu Dropdown di Blog

Patah Online - Tak bisa di pungkiri lagi menu dalam suatu blog atau website sangatlah penting. Mengapa menu dalam suatu blog, baik itu Menu Horizontal, menu vertikal sangatlah penting, ini dimaksutkan dengan adanya menu yang tertempel di blog atau website kita akan memudahkan bagi pengunjung atau visitor untuk bisa lebih tahu isi dari suatu blog atau website.

Mengiat pentingnya menu dalam suatu blog, kali ini saya bermaksut untuk membahas bagaimana cara membuat Menu Dropdown dalam blog kita.  Uke kita langsung ke cara pembuatanya.

1. Login ke Blogger => klik Rancangan => Edit HTML

2. Beckup template untuk menghindari kesalahan
3. Centang Expand Widget Templates
4. Cari Kode ]]></b:skin> lalu tempatkan script CSS berikut tepat di atasnya

#NavbarMenu {
background: #000;
width: 400px;
height: 10px;
font-size: 11px;
font-family: Trebuchet MS, Tahoma, Verdana;
color: #fff;
margin: 0px;
padding: 0px;
}

#NavbarMenuleft {
width: 400px;
float: left;
margin: 0;
padding: 0;
}

#nav {
margin: 0;
padding: 0;
}

#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#nav li {
list-style: none;
margin: 0;
padding: 0;
}

#nav li a, #nav li a:link, #nav li a:visited {
background: #222222;
height: 15px;
color: #fff;
display: block;
font-size: 11px;
font-family: trebuchet ms, ;
text-transform: none;
text-decoration: none;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
border-right: 1px solid #000;
}

#nav li a:hover, #nav li a:active {
background: #7f7f7f;
color: #222222;
margin: 0;
padding-top:6px;
padding-bottom:5px;
padding-left:13px;
padding-right:13px;
text-decoration: none;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #7f7f7f;
width: 150px;
color: #fffff;
font-size: 11px; font-family:
trebuchet ms,;
font-weight:strong;
text-transform: none;
float: none;
margin: 0;
padding: 7px 10px;
border: 1px solid #000;
}

#nav li li a:hover, #nav li li a:active {
background: #222222;
color: #7f7f7f;
padding: 7px 10px;
}

#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 140px;
}

#nav li ul ul {
margin: -32px 0 0 171px;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
position: static;
}

5. Simpan tamplate
6. Kemudian masuk ke elemen halaman => klik Tambah gatget => salin kode berikut lalu klik Simpan

<div class="menuhorisontal">
<ul id="nav">
<li><a href="http://www.patahonline.com/search/label/Photoshop">Photoshop</a></li>
<li><a href="http://www.patahonline.com/search/label/Coreldraw">Corel Draw</a></li>
<li><a href="http://www.patahonline.com/search/label/Aplikasi%2F%20Software#axzz1jFvqHbkV">Download</a></li>
<li><a href="http://www.patahonline.com/search/label/Trik%20Internet">Internet</a></li>
<li><a href="http://pattah.16mb.com/photoshop_online.html">Photoshop Online</a></li>
<li><a href="http://www.patahonline.com/search/label/tutorial">Sofwere</a></li>
<li><a href="http://www.patahonline.com/search/label/Blogger">Trik Blog</a>
  <ul>
<li><a href="http://www.patahonline.com/p/cek-berat-blog.html">Cek Berat Blog</a></li>
<li><a href="http://www.patahonline.com/p/prase-html-to-xml-blogger.html">Parse HTML Blogger</a></li>
<li><a href="http://www.patahonline.com/p/link-exchange.html">Tukar Link</a></li>
</ul>
</li>
<li><li><a href="http://pattah12.blogspot.com/search/label/Artikel">Artikel</a>
 </li>
<li><a href="http://pattah.16mb.com/mivo.html" target="_blank">TV Online</a>
 <ul>
 <li><a href="http://pattah.16mb.com/global.html" target="_blank">Global TV</a>
 </li>
<li><a href="http://pattah.16mb.com/mnc.html" target="_blank">MNC TV</a>
 </li>
<li><a href="http://pattah.16mb.com/game_online.html" target="_blank">Game Online</a>
 </li>
 </ul>
</li>
</li></ul>
</div>

NB : Ganti tulisan Merah dengan Link blog anda.

Cukup sekian postingan saya tentang Cara Membuat Menu Dropdown di Blog , semoga bisa bermanfaat.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest