Senin, 18 Februari 2013

Cara membuat Menubar pada blogspot/ Blogger




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 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>


 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!!!

0 comments:

ACCESS INFORMATION



Buka Semua | Tutup Semua

Sedang Perbaikan
Sedang Perbaikan
Silakan kirim pesan dan saran Anda,

Ahmad Sachowi Amin

Selamat Datang di Blog Saya, cybermatika.net.
Hobi saya adalah Belajar dan Belajar, entah yang penting bermanfaat untuk orang lain.Sharing adalah jalan saya, sharing dengan siapa saja yang penting memberi manfaat bagi saya.Ilmu adalah Cara saya, cara saya untuk belajar dan sharing tentang banyak hal.