Cara Membuat Menubar Di Blogger

Pertama : Membuat Menu Bar

1. Login pada blogger

2. masuk ke halaman Template

3. Edit HTML lalu Lanjutkan

4. Klik centang pada Expand Template Widget

5. Cari kode ]]></b:skin> (gunakan ctrl+f)

6. Pasang kode biru di bawah ini di atas kode ]]></b:skin>

#menubar{ width:900px; height:32px; background:#de360f; float:center; margin-bottom:10px; } #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 }

7. Selanjutnya cari kode <div id='content-wrapper'>

8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7

<div id='menubar'> <ul> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a> <ul> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> </ul> </li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a> <ul> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> </ul> </li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> <li><a href='http://tipsandtrik-15.blogspot.com/'>Ganti Menu</a></li> </ul> </div>

9. Simpan Template dan lihat hasilnya

Catatan:

1. Ganti tulisan "http://tipsandtrik-15.blogspot.com", dengan Url Link yang anda inginkan

2. Ganti tulisan warna "Ganti Menu", denngan nama menubar yang kamu inginkan ScreenShot: