Cara Membuat Menubar di Blog

Halo sobat blogger, pada kesempatan kali ini saya akan informasi tentang cara membuat menubar. Menubar biasanya di gunakan sebagai sarana navigasi pada situs web yang berisi daftar tautan/link. Biasanya menubar ini terletak di bawah header. Langsung aja... Ikuti langkah - langkah di bawah ini:

1. Login dulu ke blogger

2. Lalu klik Template 

3. Klik Edit HTML

4. Cari kode ]]></b:skin> (CTRL+F untuk mempermudah pencarian)

5. Jika sudah ketemu pasang kode di bawah ini di atas kode ]]></b:skin>

#menubar{ width:900px; height:32px; background:#de360f; border-radius: 5px;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 } 6. Selanjutnya cari kode <div id="content-wrapper"> (Kalo nggak ada cari yang mirip) 7. Pasang kode di bawah ini di Atas kode tersebut

<div id='menubar'> <ul> <li><a expr:href='data:blog.homepageUrl'>Home</a></li> <li><a href='http://blognya-bagas.blogspot.com/'>Title</a></li> <li><a href='http://blognya-bagas.blogspot.com/'>Title</a></li> <li><a href='http://blognya-bagas.blogspot.com/'>Title</a></li> <li><a href='http://blognya-bagas.blogspot.com/'>Title</a></li> </ul> </div>

8. Selesai....
(Keterangan)

• Ganti link yang berwarna biru dengan url yang di inginkan, misal: url ke suatu kategori / label
• Ganti tulisan berwarna kuning dengan tulisan judul menubar tersebut, seperti : Home, Download, Tips n Trick atau lainnya

Sekian postingan dari saya, terimakasih...

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest

About Bagas Abi W

Salah satu manusia remaja asal jogja yang sedang belajar untuk menulis blog. Suka dengan teknologi, olahraga, dan suka hal yang simpel.