Kali ini saya Admin akan share tutorial tentang Cara membuat Menu Bar ( Sub Menu ) pada blog. Karena banyaknya sobat blogger yang berkomentar ( Request ) karena kebingungan membuat menubar, saya update lagi postingan ini agar lebih relevan dan mudah di mengerti. Oke langsung saya Cara membuat Menu Bar ( Sub Menu ) pada blog silahkan disimak pada yang dibawah ini.!
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;
margin: 0 auto;
}
#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='URL HERE'>Drop Down 1</a></li>
<li><a href='URL HERE'>Drop Down 2</a></li>
<li><a href='URL HERE'>Drop Down 3</a></li>
<li><a href='URL HERE'>Drop Down 4</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnyaUntuk 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='URL HERE'>Drop Down 1 </a></li>
<li><a href='URL HERE'>Drop Down 2 </a></li>
<li><a href='URL HERE'>Drop Down 3</a>
<ul>
<li><a href='URL HERE'>Drop Down 1</a></li>
<li><a href='URL HERE'>Drop Down 2</a></li>
</ul></li>
</ul>
</div>
Keterangan:- Ganti tulisan URL HERE dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
- Ganti tulisan Drop Down dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
- Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat.
1 Comments
