sekarang saya akan berbagi informasi tentang bagaimana
cara membuat menubar untuk blog. Biasanya menubar ini terletak di bawah header.
Cara memasangnya tidak terlalu sulit. Ikuti saja langkah - langkah di
bawah ini:
1. Login pada blogger
2. Masuk ke halaman Template
3. Edit HTML lalu Lanjutkan
4. Cari kode ]]></b:skin> ,
jika sudah ketemu pasang kode di bawah ini di atas kode ]]></b:skin>
#menubar{
width:900px;
margin-top:5px;
float:center;
background:#de360f;
height:35px;
border:1px solid #de360f;
}
#menubar-left{
float:left;
width:900px;
padding-top:1px;
}
#menubar ul{
position:relative;
overflow:hidden;
padding:0;
margin:0;
font-weight:none;
font-size:12px;
}
#menubar li{
cursor:pointer;
float:left;
margin:0 padding:0;
height:32px;
}
#menubar ul li{
float:left;
list-style:none
}
#menubar ul li a{
border-right:1px solid #F0512D;
float:left;
padding: 9px 12px;
text-decoration:none;
color: #ffffff;
font-weight:bold;
font-size:14px;
font-family: Calibri;
}
#menubar ul li a:hover{
background:transparent;
color: #ffa500;
}
#menubar ul li a.current, #menubar ul li a.current:visited, #menubar ul li
a.current:hover{
color:#ffa500;
}
5. Setelah Itu Cari kode <div
id='header-wrapper'> atau lebih lengkapnya seperti ini:
<div id='header-wrapper'>
<div id='head-inner'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Semuanya Ada Di Ahmad Rizal's Blog (Header)'
type='Header'/>
</b:section>
</div>
6. Pasang kode di bawah ini di bawahkode yang mirip
dengan kode Pada no 5
<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a href='http://kitahebat1.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://kitahebat1.blogspot.com/#' title='Lihat Seluruh Postingan
Disini'>Daftar Isi</a></li>
<li><a href='http://kitahebat1.blogspot.com/#' title='budayakan bertukar link'>Tukar
Link</a></li>
<li><a href='http://kitahebat1.blogspot.com/#' title='Kumpulan tool - tool untuk
blog'>Blog Tools</a></li>
<li><a href='http://kitahebat1.blogspot.com/p/guest-book.html' title='Sapa pengunjung
lainnya :D'>Guest Book</a></li>
</ul>
</div>
</div>
7. Simpan Template
Keterangan:
- Kode yang berwarna coklat adalah kode ukuran
menubar. Sehingga bisa sobat ganti sesuai keinginan
- Kode
yang berwarna hijau HARUS kalian ganti dengan URL yang di inginkan, misal:
Url ke suatu postingan / Kategori
- Kode
Yang berwarna kuning adalah Nama dari URL yang di inginkan
-
Untuk title='bla..bla..bla' adalah deskripsi dari URL yang di
inginkan
- Menubar
bisa sobat ganti dengan mengcopy kode <li>hingga..</li> dan
pastekan di bawahnya
