Tampilkan postingan dengan label Menu Drop Down. Tampilkan semua postingan
Tampilkan postingan dengan label Menu Drop Down. Tampilkan semua postingan

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