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='Blognya Reggy (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='Blognya Reggy (Header)' type='Header'/>
</b:section>
</div>
6. Pasang kode di bawah ini di bawah kode yang mirip dengan kode Pada no 5
<div id='menubar'>
<div id='menubar-left'>
<ul>
<li><a href='http://forshareguys.blogspot.com/#'>Home</a></li>
<li><a href=' http://forshareguys.blogspot.com/ #'>Information</a</li>
<li><a href=' http://forshareguys.blogspot.com/ #' >Profil</a></li>
<li><a href=' http://forshareguys.blogspot.com/ #'>Informatika</a></li>
<li><a href=' http://forshareguys.blogspot.com/ #'>Software others</a></li>
</ul>
</div>
</div>
<div id='menubar-left'>
<ul>
<li><a href='http://forshareguys.blogspot.com/#'>Home</a></li>
<li><a href=' http://forshareguys.blogspot.com/ #'>Information</a</li>
<li><a href=' http://forshareguys.blogspot.com/ #' >Profil</a></li>
<li><a href=' http://forshareguys.blogspot.com/ #'>Informatika</a></li>
<li><a href=' http://forshareguys.blogspot.com/ #'>Software others</a></li>
</ul>
</div>
</div>
7. Simpan Template
Keterangan:
- Kode yang berwarna Biru adalah kode ukuran menubar. Sehingga bisa sobat ganti sesuai keinginan
- Kode yang berwarna Merah HARUS sobat ganti dengan URL yang di inginkan, misal: Url ke suatu postingan / Kategori
- Kode Yang berwarna Ungu adalah Nama dari URL yang di inginkan
- Menubar bisa sobat ganti dengan mengcopy kode <li>hingga..</li> dan pastekan di bawahnya
Semoga dengan artikel ini sobat mengerti untuk memasang Menubar. Selamat Mencoba!!!