Tenik membuat Menubar di blog, sahabat mungkin sudah tahu apa itu menubar bukan? Kalo belum? Baiklah tidak apa-apa akan saya jelaskan lagi untuk yang belum tahu. Menubar adalah sebuah kotak tab/bar yang isinya berupa navigasi link. Fungsi menubar yaitu untuk menyimpan link-link penting di suatu blog, agar pengunjung dapat lebih mudah mengunjungi halaman-halaman utama yang ada pada sebuah blog itu. Namun, bedanya kali ini membuat menubar pada custom template. Untuk melihat bagaimana screenshot menubarnya lihat di bawah ini:
Menubar juga bisa dibuatkan lagi submenu ke bawahnya, lihat di gambar. Nah jadi misalkan sahabat ingin menambahkan submenu dari sebuah link, tinggal ditambahkan sedikit kode yang akan dijelaskan dibawah.Menubar di postingan ini tidak ada search box seperti digambar. Tetapi jika sahabat ingin membuat menubar di blog dengan search box-nya, silahkan kunjungi postingan Disini. Nah sekarang sudah tahu bukan bagaimana tampilan menubar di blog? Sekarang, cara membuat menubar di blog tidak sulit sebenarnya.
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
kode anda
#menubar{
#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
}
6. Selanjutnya cari kode <div id="content-wrapper">
7. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 6. Pengecualian untuk yang tidak ada kode pada no 6, sahabat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada, sahabat bisa menaruhnya di bawah kode yang mirip dengan <div id='header...
kode anda
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a></li>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a></li>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a></li>
<li><a href='http://nagariblogger.blogspot.com//'>Edit Aku</a></li>
</ul>
</div>
8. Simpan Template dan lihat hasilnya
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 7 dengan kode di bawah ini :
kode anda
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a></li>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a></li>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a>
<ul>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a></li>
<li><a href='http://nagariblogger.blogspot.com/'>Edit Aku</a></li>
</ul></li>
</ul>
</div>
Keterangan:
- Ganti tulisan yang berwarna Merah 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.
- Jika ingin menambah item menubar (list), hanya tinggal Copy kode yang bergaris bawah, dan Paste di bawah kode yang bergaris bawah tersebut.
- Di setiap blog juga ada juga yang berbeda tanda kutipnya. Bisa menelitinya lagi. Tanda kutip ' atau ".
Bagaimana? mudah bukan. Yang terpenting sahabat, kunci utama keberhasilan membuat menubar pada blog yaitu ketelitian dalam mengedit dan memasang kode css/htmlnya. Misalkan ada yang kurang atau kesalahan sedikit, menubar itu malah jadi gagal alias tidak terpasang. Jadi, sahabat harus lebih teliti agar tidak keliru, semoga berhasil
0 komentar:
Posting Komentar