Membuat Menu Drop Down Blogspot

Buat kamu yang mau bikin menu dropdown, mari kita belajar membuat menu dropdown. Pertama kenalan dulu dengan yang namanya menu dropdown, ini contoh menu dropdown yang ada di blog.

Nah yuk coba bikin dengan cara-cara ini :

1. Login ke Blogger > klik Rancangan > Edit HTML
2. Backup template untuk menghindari kesalahan
3. Lalu 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 gadget > Pilih menu Add HTML/Javascript
    > salin kode berikut lalu klik Simpan

<div class="menuhorisontal">
<ul id="nav">
<li><a href="http://sk-infogadget.blogspot.com/2012/07/welcome-to-sk-electronic_29.html">Home</a></li>
<li><a href="https://plus.google.com/115896898127443785901/posts">Profil</a></li>
<li><a href="https://plus.google.com/115896898127443785901/posts">Contact</a>
 <ul>
 <li><a href="http://www.facebook.com/profile.php?id=100004072744015">Facebook</a></li>
 <li><a href="https://twitter.com/YozaDemulant">Twiter</a></li>
 </ul>
</li>
<li><a href="http://sk-infoseru.blogspot.com/search/label/News%20Update">News Update</a></li>
<li><a href="http://sk-infoseru.blogspot.com/search/label/Update%20Harga%20Terbaru">Update Harga</a>
 <ul>
 <li><a href="http://sk-infoseru.blogspot.com/2012/07/harga-blackberry-update-juli-2012.html">Blackberry</a>
 </li>
<li><a href="http://sk-infoseru.blogspot.com/2012/07/harga-ipad-iphone-apple-update-juli-2012.html">Apple</a>
 </li>
<li><a href="http://sk-infoseru.blogspot.com">Nokia</a>
 </li>
<li><a href="http://sk-infoseru.blogspot.com/2012/07/harga-samsung-update-juli-2012.html">Samsung</a></li>
</ul>
</li>
<li><a href="http://sk-infoseru.blogspot.com">Sitemap</a></li>
<li><a href="'http://sk-infoseru.blogspot.com">Blogger</a>
  <ul>
 <li><a href="http://sk-infoseru.blogspot.com/search/label/Tips%20Trik%20Blogging">Trik Internet</a>
 </li>
</ul>
</li>
<li><a href="http://sk-infoseru.blogspot.com">Software</a>
 <ul>
 <li><a href="http://sk-infoseru.blogspot.com">Applikasi</a>
 </li>
 <li><a href=" http://sk-infoseru.blogspot.com ">Games</a>
 </li></ul>
</li>
<li><a href=" http://sk-infoseru.blogspot.com ">Free Music</a></li>
<li><a href=" http://sk-infoseru.blogspot.com ">Games</a>
 <ul>
 <li><a href=" http://sk-infoseru.blogspot.com ">Game Online</a>
 </li>
 <li><a href=" http://sk-infoseru.blogspot.com ">Game Online</a>
 </li>
 </ul>
</li>
</ul>
</div>

Bila ingin menambahkan menu baru tinggal tambahkan dan sisipkan code dibawah ini ketempat yang kamu mau

<li><a href="https://plus.google.com/115896898127443785901/posts">Profil</a></li>


 NB : Ganti tulisan Merah dengan Link blog kamu.
         Ganti tulisan Hijau sesuai dengan nama menu yang kamu inginkan


Keep Blogging !