Berikut cara membuat menu horizontal dropdown di blogspot :
1. Silahkan masuk dengan akun blogger sobat
2. Setelah itu menuju ke halaman "edit HTML" ("Expand Template Widget" tidak usah dicentang). Jangan lupa untuk mem-backup templatenya.
3. Cari Kode ]]></b:skin> (gunakan CTRL + F atau F3 pada Keyboard sobat) Kemudian Pastekan kode CSS berikut ini tepat di atasnya.
#subnavbar {
background: #666;
width: 960px;
height: 26px;
color: #FFF;
margin: 0;
padding: 0;
}
#subnav {
margin: 0;
padding: 0;
}
#subnav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#subnav li {
list-style: none;
margin: 0;
padding: 0;
}
#subnav li a, #subnav li a:link, #subnav li a:visited {
color: #FFF;
display: block;
font-size: 10px;
font-weight: bold;
text-transform: uppercase;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li a:hover, #subnav li a:active {
background: #888;
color: #FFF;
display: block;
text-decoration: none;
margin: 0 5px 0 0;
padding: 6px 13px;
}
#subnav li li a, #subnav li li a:link, #subnav li li a:visited {
background: #666;
width: 140px;
float: none;
margin: 0;
padding: 6px 10px;
border-bottom: 1px solid #FFF;
border-left: 1px solid #FFF;
border-right: 1px solid #FFF;
}
#subnav li li a:hover, #subnav li li a:active {
background: #888;
margin: 0;
padding: 6px 10px;
}
#subnav li {
float: left;
padding: 0;
}
#subnav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 160px;
margin: 0;
padding: 0;
}
#subnav li ul a {
width: 140px;
}
#subnav li ul ul {
margin: -25px 0 0 161px;
}
#subnav li:hover ul ul, #subnav li:hover ul ul ul, #subnav li.sfhover ul ul, #subnav li.sfhover ul ul ul {
left: -999em;
}
#subnav li:hover ul, #subnav li li:hover ul, #subnav li li li:hover ul, #subnav li.sfhover ul, #subnav li li.sfhover ul, #subnav li li li.sfhover ul {
left: auto;
}
#subnav li:hover, #subnav li.sfhover {
position: static;
}
4. Setelah itu, cari kode di bawah ini
<b:widget id='Header1' locked='true' title='Blog Demo (Header)' type='Header'/>
</b:section>
Keterangan:
Yang penting dicari adalah kode warna hijau. Sementara yang berwarna merah adalah nama blog tempatku menguji coba (semacam laboratorium, heuuuuu hohoho).
Pastekan Kode berikut tepat di bawah kode yang berwarna kuning (yaitu kode</b:section>).
<div id='subnavbar'>
<ul id='subnav'>
<li>
<a href='#'>Home</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/2010/07/perpustakaan-online-poenjakoe-soe86.html'>about</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/05/contact.html'>Kontak</a>
</li>
</ul>
</li>
<li>
<a href='#'>DAFTAR ISI</a>
</li>
<li>
<a href='#'>Antropologis</a>
<ul>
<li>
<a href='#'>Mengenal Antropologi</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/search/label/Konsep-Konsep%20dalam%20Antropologi'>Konsep-Konsep</a>
</li>
</ul>
</li>
<li>
<a href='#'>Teori Antropologi</a>
<ul>
<li>
<a href='#'>Teori Klasik</a>
</li>
<li>
<a href='#'>Teori Modernis</a>
</li>
<li>
<a href='#'>Teori Posmodernis</a>
</li>
</ul>
</li>
<li>
<a href='#'>Metodologi Penelitian</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/search/label/Metode%20Penelitian%20Kualitatif'>Metode Penelitian Kualitatif</a>
</li>
<li>
<a href='#'>Metode Penelitian Kuantitatif</a>
</li>
</ul>
</li>
<li>
<a href='#'>Etnografi</a>
<ul>
<li>
<a href='#'>Mengenal Etnografi</a>
</li>
<li>
<a href='#'>Etnografi (Hasil Penelitian)</a>
</li>
</ul>
</li>
<li>
<a href='#'>My Reading List</a>
<ul>
<li>
<a href='http://en.wikipedia.org/wiki/Gender' target='_blank'>Gender</a>
</li>
<li>
<a href='http://en.wikipedia.org/wiki/Feminism' target='_blank'>Feminism</a>
</li>
<li>
<a href='http://www.lifepositive.com/body/nature/environmental.asp' target='_blank'>Nature - Earth crusader</a>
</li>
<li>
<a href='http://en.wikipedia.org/wiki/Ecofeminism' target='_blank'>Ecofeminism</a>
</li>
</ul>
</li>
<li>
<a href='#'>Figure</a>
<ul>
<li>
<a href='http://www.unep.org/women_env/w_details.asp?w_id=107' target='_blank'>Vandana Shiva</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/Parsudi%20Suparlan'>Parsudi Suparlan</a>
</li>
</ul>
</li>
</ul>
</li>
<li>
<a href='#'>Tips-Tips</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/2010/07/belajar-otodidak.html'>belajar otodidak</a>
</li>
<li>
<a href='#'>tips blogger</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/search/label/A.%20Tahap%20Awal%20Membuat%20Blog' target='_blank'>Tahap Awal Membuat Blog</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/B.%20Tahap%20Lanjutan%20dalam%20Bloging' target='_blank'>Tahap Lanjutan dalam Bloging</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/C.%20Tahap%20Profesional%20dalam%20Bloging' target='_blank'>Tahap Profesional dalam Bloging</a>
</li>
</ul>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/F.%20Tips%20Internet%20Murah'>internet murah</a>
</li>
</ul>
</li>
<li>
<a href='#'>Download Gratis</a>
<ul>
<li>
<a href='http://soe86.blogspot.com/2010/08/download-gratis-literatur-antropologi-1.html'>Literatur Antropologi</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/08/pusat-download-gratis-di-sini.html'>Software / Aplikasi</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/08/download-gratis-novel-1.html'>Novel</a>
</li>
<li>
<a href='http://soe86.blogspot.com/2010/08/download-gratis-masalah-kebidanan.html'>Kebidanan</a>
</li>
<li>
<a href='http://soe86.blogspot.com/search/label/Trik%20Mendownload'>Trik Mendownload</a>
</li>
</ul>
</li>
<li>
<a href='#'>BLOG SAHABAT</a>
<ul>
<li>
<a href='http://t4belajarblogger.blogspot.com/' target='_blank'>T4 Belajar Blog</a>
</li>
<li>
<a href='http://wawanwae.blogspot.com/' target='_blank'>Blogtainment</a>
</li>
<li>
<a href='http://azgi.blogspot.com/2010/05/koreksi-error-pada-kotak-komentar.html' target='_blank'>Sunda Priangan</a>
</li>
<li>
<a href='http://jurnalkita-indonesiana.blogspot.com/' target='_blank'>Komunitas Penulis Muda</a>
</li>
<li>
<a href='http://human-fisip-unhas.blogspot.com/' target='_blank'>HUMAN FISIP UH</a>
</li>
</ul>
</li>
</ul>
</div>
Tidak ada komentar:
Posting Komentar