Sobat-sobat sekalian pasti sudah tahu kan yang namanya menu bar, kalau belum tahu lihat aja gambar di atas, intinya tampilan menu, hehe. Berhubung sudah malam dan saya juga sudah ngantuk jadi langsung kita bagi aja tipsnya, silahkan sobat lanjutkan membacanya.
Cara Memasang Menu Bar
1. Sobat sekalian harus login terlebih dahulu ke blog nya sobat-sobat sekalian.
2. Lalu sobat masuk ke dashboard dan klik Template.
3. Selanjutnya sobat Edit HTML, tetapi sebelum itu saran saya sobat backup terlebih dahulu template nya, kalau sobat belum tahu caranya, sobat bisa baca point no 1 di artikel Tips Dan Cara Mudah Membuat Related Post.
4. Berikutnya sobat jangan lupa memberi tanda thick atau centang pada Expand Widget Template, kalau sobat lupa memberi centang biasanya ada script yang tidak muncul.
5. Next step, sobat cari kode java script ]]></b:skin> gunakan F3 atau ctrl+F agar lebih mudah dalam pencarian.
6. Lalu sobat salin kode java script di bawah ini dan tempel di atas kode ]]></b:skin>.
#menubar{
width:900px;
height:32px;
background:#de360f;
margin: 0 auto;
}
#menubar ul{
float:left;
margin:0;
padding:0;
}
#menubar li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#menubar li a, #menubar li a:link{
border-right:1px solid #F0512D;
float:left;
padding:8px 12px;
color:#fff;
text-decoration:none;
font-size:13px;
font-weight:bold;
}
#menubar li a:hover, #menubar li a:active, #menubar .current_page_item a {
color:#ffa500;
text-decoration:underline;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #de360f;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #F0512D;
color: #ffa500;
}
#menubar li ul{
z-index-9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##F0512D;
}
#menubar li:hover ul, #menubar li li:hover ul, #menubar li li li:hover ul, #menubar li.sfhover ul, #menubar li li.sfhover ul, #menubar li li li.sfhover ul{
left:auto
}
#menubar li:hover, #menubar li.sfhover{
position:static
}
Catatan :
- Untuk mengganti panjang menu bar sobat bisa edit pada width 900px, ubah nilainya.
- Untuk lebarnya edit pada height 32px.
- Untuk warna background, sobat edit kode warna pada baris ke 4 pada kode di atas. Selebihnya sobat bisa bereksperimen sendiri.
- Untuk mengetahui lebih banyak kode warna sobat silahkan klik di sini.
7. Berikutnya sobat cari kode java script <div id="content-wrapper"> atau kalau sobat tidak menemukannya sobat cari saja kode java script div class='main-outer'> agar lebih mudah mencarinya gunakan ctrl+F3.
8. Lalu sobat pasang kode di bawah ini tepat di atas kode <div id="content-wrapper"> atau kalau tidak ketemu letakkan di atas div class='main-outer'> saja.
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 1</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 2</a></li>
<li><a href='http://tiportips.blodspot.com/'>Project 3</a></li>
</ul>
</div>
Catatan :
- Ganti http://tiportips.blogspot.com dengan link URL milik sobat, misalnya link URL label sobat.
- Ganti Project 1 dan project lainnya dengan nama menu bar yang sobat inginkan, misalnya nama dari label sobat.
9. Apabila telah selesai maka simpan template kamu dan lihat hasilnya.
Jika sobat ingin menggunakan sub menu sobat bisa menggunakan kode script di bawah ini untuk menggantikan langkah no. 8.
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 1</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 2</a>
<ul>
<li><a href='http://tiportips.blogspot.com/'>Project 2.A</a></li>
<li><a href='http://tiportips.blogspot.com/'>Project 2.B</a></li>
</ul></li>
</ul>
</div>
Sangat mudah bukan?? tapi kalau sobat masih merasa bingung atau punya opini lain, jangan sungkan-sungkan untuk berkomentar di kotak komentar. Selain itu sobat juga bisa baca artikel menarik lainnya yaitu Tips Belajar Membuat Highlight Menarik Pada Blogger. Demikian lah Tips singkat dari saya mengenai Tips Cara Mudah Memasang Menu Bar di Blogger, semoga bisa bermanfaat untuk sobat sekalian. Terimakasih atas kunjungannya dan see you.
Like THIS :
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku
 |
Belum ada komentar untuk "Tips Cara Mudah Memasang Menu Bar di Blogger"
Post a Comment