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.
Previous
Next Post »

6 Komentar

Write Komentar
Anonymous
AUTHOR
July 8, 2012 at 8:03 AM delete

kerennn sobb,,,

Reply
avatar
Agung Ngurah
AUTHOR
October 24, 2012 at 6:53 AM delete

Thks sobat, sangat membantu buat pemula seperti saya. :)

Reply
avatar
December 7, 2012 at 7:17 PM delete

Mantab mas, sudah dicoba di iklan baris mobil, cocok dan pas warnanya jadi nggak perlu edit lagi. Thks ya

Reply
avatar
Unknown
AUTHOR
December 9, 2012 at 12:16 PM delete

@Iklan Baris Mobil
sama2 sobat, senang bisa bermanfaat :)

Reply
avatar

Jadilah pembaca yang bermartabat dengan memberikan komentar yang santun,indah di pandang dan sesuai dengan norma yang baik serta sesuai dengan apa yang ada di postingan.
Kriteria Komentar yang di tampilkan:
1. Bukan Komentar Spam
2. Komentar tidak sesuai dengan isi artikel
3. Menyisipkan Link/url baik itu blog/web pada komentar EmoticonEmoticon