Cara Membuat Menubar Pada Blog
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>
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;
}
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>
<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<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>
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
kode no 5 ada tapi gak kayak gtu
BalasHapuskode baris ke 5 dan 6 g ad
posisi nya terlalu kek kiri.,.bisa g agak d tengahin? gmn cara nya?
BalasHapus