Cara Membuat Menubar di Blog ~ Blognya Ardiant

Hai, Sahabat Amzkomp...
Bertemu lagi dengan saya...
Pada kesempatan posting kali ini, saya akan membahas " Cara Membuat Menubar di Blog"

Agan-agan udah taukan menubar itu apa?
Bagi agan yang belum tahu, Menubar adalah Tab yang isinya berupa navigasi link atau menu. Yang berfungsi untuk memudahkan pengunjung blog agan untuk melihat post agan berdasarkan kategori. Tutorial ini hanya untuk custom template, bukan template klasik.

Nah, Bagaimana Cara membuatnya?
1. Masuk keakun Blogger agan.
2. Pilih "Template" > "Edit HTML"
3. Cari kode ]]></b:skin> dan letakkan kode ini di bawah ]]></b:skin>
Kode :

#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
}

4. Cari kode <div id="content-wrapper">
5. Letakkan kode ini di bawah <div id="content-wrapper"> :
Kode :

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

Ganti tulisan yang bercetak merah dengan link menu yang agan mau dan ganti tulisan yang berwarna biru dengan judul menubar yang agan mau.
9. Save Template.

Bagaimana? Berhasil?

Semoga Artikel ini bermanfaat...

Terima kasih telah membaca artikel tentang Cara Membuat Menubar di Blog di blog Blognya Ardiant jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web broswer anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Blognya Ardiant

Cara Membuat Menubar di Blog

Artikel terbaru :

3 comments