Tutorial Membuat Menu Bar Dropdown pada Blogspot

Kebetulan template saya adalah template bawaan default-nya blogspot sehingga tidak ada menubar-nya apalagi berbentuk dropdown. Langsung googling dan saya coba eh... lumayan bisa, tapi perlu sedikit keterampilan tambahan dan keuletan karena ketika saya pasang ke template yang lain eh malah acak-acakan. Tapi ini sebagai bahan dasar untuk berlanjut ke yang lebih rumit.

Karena banyaknya sobat blogger yangmasihkebingungan membuat menubar. Ini langkah-langkahnya:

1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Klik centang pada Expand Template Widget
5. Cari kode ]]></b:skin> (gunakan ctrl+f)
6. Pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
float:center;
margin-bottom:10px;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a  {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}

7. Selanjutnya cari kode <div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
</ul>
</div>

9. Simpan Template dan lihat hasilnya


Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:

Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com//'>judul</a></li>
<li><a href='#'>judul</a>
<ul>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
<li><a href='http://eppoh.blogspot.com/'>judul</a></li>
</ul></li>
</ul>
</div>

'Keterangan:

• Ganti tulisan yang berwarna Merah muda dengan url link menubar yang diinginkan, misal: link postingan, link kategori, label, link halaman statis ataumalalui contoh : diganti denga url label : http://eppoh.blogspot.com/search/label/internet/
• Ganti tulisan berwarna Biru muda (judul) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
• Untuk sub menu tidak perlu menggunakan url cukup diberi tanda #' dan "nama" ganti sesuai nama sub judul atau sub menu.
  
• Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
• Nah, jika sobat ingin menambah item menubar (list), sobat hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.

blognya-reggy