#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>
Nah, langkah terakhir adalah menyimpan templatenya.
Silahkan lihat contoh hasilnya di sini
Menu yang sobat copy tersebut masih seperti menu pada blogku ini, makanya lakukan pengeditan sesuai blog dan keinginan sobat. Semoga bermanfaat....
