[SHARE] MEMBUAT DROPDOWN MENU DI BLOGGER

Assalaamualaikum konco konco :)
di Postingan ini saya akan membagi sedikit trik buat blogging nih . emang sih REPOST tapi berhubung saya cuma mau share jadi saya post deh haha.
Di kelas ada yang tanya gini

Giffy , itu cara bikin menu tab di atas gimana ? ajarin atuuh

naah biar mudah saya kasih tau caranya disini .

PERLU DIPERHATIKAN :

1. IKUTU STEP BY STEP DENGAN BENAR
2. TELITI !
3. DO WITH YOUR OWN RISK
4. KERUSAKAN PADA HTML BUKAN TANGGUNG JAWAB SAYA
5. DISARANKAN MEM BACK-UP TERLEBIH DAHULU HTML TEMPLATE ANDA
6. THANKS TO : http://artikelkomputerku.blogspot.com

langsung aja yaa :)

1. Log-in ke Blogger, kemudian masuk ke menu Design
2. pilih "EDIT HTML"
3. cari kode berikut menggunakan CTRL+F

  ]]></b:skin> 
      
      4. Di bagian atas kode tersebut masukkan kode berikut


menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Arial", Arial;
font-size:14px;
font-weight:bold;

}
.menu ul{
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
font-size:14px;
font-weight:bold;
}
.menu li{
float:left;
padding:0px;
}
.menu li a{
background:#333333 url("http://i47.tinypic.com/qp53sw.jpg") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a{
background: #2580a2 url("http://i49.tinypic.com/13zbc53.jpg") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul{
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul{
display:block;

}
.menu li li {
background:url('http://i45.tinypic.com/nvxxqg.jpg') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a{
background:none;

}
.menu li ul a{
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a{
background:#2580a2 url('http://i50.tinypic.com/66elwh.jpg') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
.menu p{
clear:left;
}
5. Simpan Template

6. Lalu Masuk ke " Page Elements " (untuk menambah gadget_

7. tambahkan HTML/Javascript Widget

8. lalu copy kode berikut
<div class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Windows Tricks</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Software</a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Microsoft Word</a></li>
<li><a href="#">Data recovery</a></li>
<li><a href="#">Antivirus</a></li>
</ul>
</li>
<li><a href="#">Blog</a>
<ul>
<li><a href="#">Blog Tips</a></li>
<li><a href="#">SEO Tips</a></li>
<li><a href="#">Adsense</a></li>
<li><a href="#">Feed</a></li>
</ul>
</li>
<li><a href="#">Phone Tips</a>
<ul>
<li><a href="#">Phone Secret Codes</a></li>
<li><a href="#">Phone Screenshot</a></li>
</ul>
</li>
<li><a href="#">Link</a>
<ul>
<li><a href="#">Artikel Komputer</a></li>
<li><a href="#">Panduan SEO</a></li>
</ul>
</li>

<li><a href="#">ArcGIS Tutorial</a></li>
<li><a href="#">Free Translator</a></li>
<li><a href="#">Link Exchange</a></li>
</ul>
</div>
        


9. tanda # adalah URL anda, ganti saja dengan URL yang anda tuju
10. Nama nama seperti contoh :
<li><a href="#">Tutorial</a>

Tulisan Tutorial bisa anda ganti sesuka hati

11. Lalu :

<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">Windows Tricks</a></li>

Yang Kuning merupakan tab utama lalu yang hijau adalah dropdown dari tab utama. bisa anda ganti nama dan url sesuka anda

SELESAI :)
Cukup Jelas kah ? kalo ga jelas bisa tanya langsung :)
makasiih wassalaamualaikum wr.wb