Cara mudah membuat Menu Bar di Blog
Selamat malam sobat 15 Desember 2011. Artikel sebelumnya masih anget udah kepengen bikin artikel lagi neh, hehe. mungkin klo ada yang pengen baca artikel mengenai Cara mendaftarkan blog di DMCA.
Oke langsung saja ke topik pembahasan yaitu cara menambahkan Menu Bar pada Blog. salah satu cara agar kita dapat meningkatkan page views blog salah satunya adalah menambahkan Menu Navigasi atau biasa disebut Menu Bar. Mungkin bagi saya yang menggunakan template bukan dari blogger sudah tidak perlu susah payah lagi menambahkan Menu Bar. Karena sudah default dari template saya. Oke lah jangan berlama-lama, lagian juga paling cuma dikit yang baca basa basi ini, hehe.
Cara Menambahkan 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 di bawah ini di atas kode ]]></b:skin>
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 di bawah ini di atas kode ]]></b:skin>
#menubar{7. Selanjutnya cari kode <div id="content-wrapper">
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
}
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7
<div id='menubar'>9. Simpan Template dan lihat hasilnya
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
</ul>
</div>
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>Keterangan:
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a>
<ul>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
<li><a href=' http://15desember2011.blogspot.com/ '> Menu </a></li>
</ul></li>
</ul>
</div>
- Ganti tulisan yang berwarna Orange dengan url link menubar yang diinginkan, misal: link postingan, link kategori, link halaman statis atau lainnya
- Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, Guest book atau lainnya
- Untuk mengubah panjang menubar bisa sobat ganti tulisan 900px menjadi sesuai dengan keinginan sobat
Sekian dulu yah artikel saya tentang Cara Mudah Membuat Menu Bar di Blog. Terima Kasih.
No comments:
Post a Comment