[TUTORIAL] CARA MEMBUAT MENUBAR PADA BLOG

 

Hallo sobat, kita ketemu lagi. Kali ini saya akan sharing tutorial tentang Cara membuat Menubar di blog. Sobat tau menubar kan? benar.. Menubar adalah navigasi menu yang dibuat untuk memudahkan pengunjung blog mengunjungi suatu halaman blog. Biasanya menubar ini terletak di bawah header. Cara memasangnya tidak terlalu sulit kok sobat. Ikuti 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='Blognya Reggy (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://mixmaxinc.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://mixmaxinc.blogspot.com/#' title='Lihat Seluruh Postingan Disini'>Daftar Isi</a></li>
<li><a href='http://mixmaxinc.blogspot.com/#' title='budayakan bertukar link'>Tukar Link</a></li>
<li><a href='http://mixmaxinc.blogspot.com/#' title='Kumpulan tool - tool untuk blog'>Blog Tools</a></li>
<li><a href='http://mixmaxinc.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 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
- 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

Semoga dengan artikel ini sobat mengerti untuk memasang Menubar. Selamat Mencoba!!!

Posted in: Tutorial