Senin, 14 September 2009

Membuat Menu DropDown

1. Log In dulu ke account blogger Anda
2. Setelah itu klik Layout > Edit HTML
3. Kemudian masukkan kode di bawah ini diatas ]]>skin

/************************************************
* Navbar *
************************************************/

#navbarmenu {
background: #1A4E88;
width: 960px;
height: 30px;
color: #FFFFFF;
margin: 0px auto 0px;
padding: 0px 0px 0px 0px;
}

#navbarmenuleft {
width: 660px;
height: 30px;
float: left;
margin: 0px;
padding: 0px;
}

#navbarmenuright {
width: 300px;
height: 30px;
float: right;
margin: 0px;
padding: 0px;
text-align: right;
}

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

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

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

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

#nav li a, #nav li a:link, #nav li a:visited {
color: #FFFFFF;
display: block;
font-weight: bold;
margin: 0px 20px 0px 0px;
padding: 8px 10px 7px 10px;
}

#nav li a:hover, #nav li a:active {
background: #4A7EB8;
color: #FFFFFF;
display: block;
text-decoration: none;
margin: 0px 20px 0px 0px;
padding: 8px 10px 7px 10px;
}

#nav li li a, #nav li li a:link, #nav li li a:visited {
background: #4A7EB8;
color: #FFFFFF;
width: 140px;
float: none;
margin: 0px;
padding: 6px 10px 5px 10px;
border-bottom: 1px solid #FFFFFF;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
}

#nav li li a:hover, #nav li li a:active {
background: #1A4E88;
color: #FFFFFF;
}

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

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

#nav li li {
}

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

#nav li ul a:hover, #nav li ul a:active {
}

#nav li ul ul {
margin: -27px 0 0 162px;
}

#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;
}

#searchdiv {
margin: 0px;
padding: 0px;
}

#searchform {
margin: 0px;
padding: 4px 0px 0px 0px;
}

#s {
background: #FFFFFF;
width: 210px;
color: #333333;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
padding: 3px;
margin: 0px 0px 0px 0px;
border-top: 1px solid #666666;
border-right: 1px solid #666666;
border-left: 1px solid #999999;
border-bottom: 1px solid #999999;
}

#sbutt {
background: #1A4E88 url(images/submit.png);
color: #FFFFFF;
font-size: 11px;
font-family: Arial, Tahoma, Verdana;
padding: 1px;
margin: 0px;
border: 1px solid #FFFFFF;
}

#name, #email, #url {
background: #EAEAEA !important;
color: #202020;
font-size: 12px;
font-family: Arial, Tahoma, Verdana;
margin: 0px;
padding: 4px;
border-top: 1px solid #666666;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #666666;
border-bottom: 1px solid #DDDDDD;
}
4. Lalu Masukan kode di bawah ini di antara <body>
</div>
<div id='navbarmenu'>
<div id='navbarmenuleft'>
<ul id='nav'>

<li><a expr:href='data:blog.homepageUrl'>Home</a>
<ul>
<li><a href='http://www.blogger.com'>BLOGGER</a></li>
<li><a href='http://www.facebook.com/sunardi.doank?ref=profile'> My Facebook</a></li>
<li><a href='http://stmik-kharisma.ac.id/stmik/'>My Kampuz</a></li>
</ul></li>

<li><a href='http://sunsetcom.blogspot.com'>Ilmu Komputer</a>

<ul>
<li><a href='#'>Desain Grafis</a>

<ul>
<li><a href='#'>Tutorial Autocad</a></li>
</ul>
</li>

<li><a href='#'>Tips Bermain Games</a>

<ul>
<li><a href='#'>Games Strategy</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Handphone</a>

<ul>
<li><a href='#'>Tutorial Software Handphone</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Internet</a>

<ul>
<li><a href='#'>Tips Internet</a></li>
<li><a href='#'>Tips SEO</a></li>
<li><a href='#'>Tutorial Blog</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Komputer</a>

<ul>
<li><a href='#'>Belajar Membuat Virus</a></li>
<li><a href='#'>Belajar Memperbaiki Komputer</a></li>
<li><a href='#'>Belajar Menjadi Hacker</a></li>
<li><a href='#'>Belajar Merakit Komputer</a></li>
<li><a href='#'>Istilah-istilah Komputer</a></li>
<li><a href='#'>Mempercepat Kinerja PC</a></li>
<li><a href='#'>Tutorial Anti Virus</a></li>
</ul>
</li>

<li><a href='#'>Tutorial Linux</a>

<ul>
<li><a href='#'>Linux Berbasis Text</a></li>
</ul>
</li>

</ul>
</li>

<li><a href='#'>My Friend&#39;s</a>

<ul>
<li><a href='http://www.septian-gusonela.blogspot.com'>Septian</a>
</li>

<li><a href='http://ainuamri.wordpress.com'>Kumpulan Cerita Lucu</a>
</li>

<li><a href='#'>Paid To Click</a>
<ul>
<li><a href='#'>Bukti Pembayaran Paid To Click</a></li>
<li><a href='#'>Macam-macam Paid To Click</a></li>
<li><a href='#'>Tutorial Paid To Click</a></li>
</ul>
</li>

<li><a href='#'>Paid To Surf</a>
<ul>
<li><a href='#'>Macam-macam Paid To Surf</a></li>
<li><a href='#'>Tutorial Paid To Surf</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Affiliate</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Affiliate</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Click</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Click</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Download</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Download</a></li>
<li><a href='#'>Tutorial Pay Per Download</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Review</a>
<ul>
<li><a href='#'>Bukti Pembayaran Pay Per Review</a></li>
<li><a href='#'>Macam-macam Pay Per Review</a></li>
<li><a href='#'>Tutorial Pay Per Review</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Sell</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Sell</a></li>
<li><a href='#'>Tutorial Pay Per Sell</a></li>
</ul>
</li>

<li><a href='#'>Pay Per SignUp</a>
<ul>
<li><a href='#'>Macam-macam Pay Per SignUp</a></li>
</ul>
</li>

<li><a href='#'>Pay Per Survey</a>
<ul>
<li><a href='#'>Macam-macam Pay Per Survey</a></li>
</ul>
</li>

</ul>
</li>

<li><a href='#'>Materi</a>
<ul>
<li><a href='http://sunsetcom.blogspot.com/search/label/Materi%20Islam'>Materi Islami</a>
</li>
</ul>
</li>

<li><a href='#'>Bisnis</a>
<ul>
<li><a href='http://sunsetcom.blogspot.com/search/label/Pulsa%20Murah'>Bisnis Pulsa</a>
<ul>
<li><a href='http://sunsetcom.blogspot.com/search/label/Pendaftaran'>Pendaftaran</a></li>
<li><a href='http://sunsetcom.blogspot.com/search/label/Cara%20Deposit'>Cara Deposit</a></li>
<li><a href='http://sunsetcom.blogspot.com/search/label/Cara%20Transaksi'>Cara Transaksi</a></li>
</ul>
</li>
<li><a href='http://www.kartuajaib.com/?id=kakashu'>Bisnis Pulsa Juga</a></li>
<li><a href='http://www.paypalbisnis.com/?ref=kakashu'>Paypal Bisnis</a></li>
<li><a href='#'>Free Download Music</a></li>
<li><a href='#'>Free Download Software</a></li>
<li><a href='#'>Free Download Template</a></li>
<li><a href='#'>Free Download Video</a></li>
<li><a href='#'>Free Download Virus</a></li>
</ul>
</li>

<li><a href='http://sunsetcom.blogspot.com/search/label/Free%20Download'>Free Download</a>
<ul>
<li><a href='http://www.blogger.com'>BLOGGER</a></li>
<li><a href='http://www.facebook.com/sunardi.doank?ref=profile'> My Facebook</a></li>
</ul></li>

</ul>
</div>

5. Lalu Ganti tanda '#' sesuai dengan link yang di inginkan
6. Simpan dan hasil akan tampak seperti gambar di bawah ini