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://anjeunn.blogspot.com/' title='home'>Home</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='Lihat Seluruh Postingan Disini'>Daftar Isi</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='budayakan bertukar link'>Tukar Link</a></li>
<li><a href='http://anjeunn.blogspot.com/#' title='Kumpulan tool - tool untuk blog'>Blog Tools</a></li>
<li><a href='http://anjeunn.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!!!

12 komentar

  1. Assalam..., Terimakasih banyak ya Mas dah share tutor nya, mana kala juga Mas mau bertukar Link dengan blogsit saya...!

    Visite Back : http://khabaranunik.blogspot.com/

    ReplyDelete
  2. halo bang,, saya kog belum bisa post di menubar saya ya.. kalo di klik di menubarnya belum bisa muncul ke halaman yg dituju.. mohon bantuannya bang..

    ini web blog saya
    http://guemilanisty.blogspot.com/

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. d blog gw gk ada tlisn ""
    gmn tuh brada??
    mohon penjelasannya

    ReplyDelete
  5. trimakasih banyak mas atas tutornya, saya senang sekali bisa terbantukan dari blognya mas.sangat mengesankan!!!!!!!!!!!!!!

    ReplyDelete
  6. saya suka blok anda tentang cara membuat menu bar pada blog, saya berharap untuk melihat lebih banyak dari anda. apakah anda menjalankan situs lain????

    ReplyDelete
  7. bang, panjang menu barnya mau di lebarin.... caranya gimana and mau ganti warna...????

    ReplyDelete
  8. makasih sob.blog nya bagus bnget/........

    ReplyDelete
  9. makasih gan tutorialnya,
    tp di HTML ane "id='header-wrapper'>" gak ketemu, mohon pencerahannya gan...

    ReplyDelete
  10. Alhamdulillah akhirnya bisa ..
    Thanks bgt ya ..Tutorialnya ..bermanfaat bgt ..
    pertamanya emang rada ribet tapi .. untuk selanjutnya ok ..
    @ Randi: emang gk ada kl cari di HTML kode itu yg ada pasti div cla gitu,

    ane sarankan cari yg mirip .. contohnya cari
    /div>, trus copast deh, n ikutin yg lain

    ReplyDelete
  11. perlu di coba gan,.,
    http://obatkuat-aong.blogspot.com

    ReplyDelete
  12. Thanks infonya gan,sangat membantu...

    Kunjungi juga blog saya dan mohon saran nya biar blog saya bisa bagus kayak punya anda..

    www.cucubida.blogspot.com

    ReplyDelete

Silahkan berkomentar dengan baik dan sopan, komentar berunsur Spam dan Link aktif maupun statis akan dihapus. Demi kenyamanan dan transparansi, mohon maaf komentar "anonymous" tidak akan ditanggapi

 
© 2012 Anjeunn All Rights reserved | Design by Reggy Zian | Powered by Blogger