OK kali ini saya akan memberi trik membuat menubar atau Drop Down pada Blog,contoh nya seperti gambar di bawah ini :
Note: Untuk mempermudah pengeditan sebaiknya gunakan Tool Edit Plus 3 untuk mengedit htmlnya.
Adapun caranya sebagagai berikut :
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
Adapun caranya sebagagai berikut :
1. Login pada blogger
2. masuk ke halaman Template
3. Edit HTML
4. Copas code HTML nya dan Paste ke Tools Edit Plus, tapi kalau kalian bisa langsung edit di blog juga ga ap2? lanjuuutttt....
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini di atas kode ]]></b:skin>
4. Cari kode ]]></b:skin> (gunakan ctrl+f)
5. Pasang kode di bawah ini 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<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<div id="content-wrapper">
}
7. Selanjutnya cari kode :
<div id="content-wrapper">
8. Pasang kode di bawah ini di Atas kode yang bercetak tebal pada no 7. Pengecualian untuk yang tidak ada kode pada no 7, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada sobat bisa menaruhnya di bawah kode yang mirip dengan
<div id='header...
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
</ul>
</div>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
</ul>
</div>
9. Simpan Template dan lihat hasilnya
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
Untuk membuat sub menu (menu dropdown) agar mudah ganti saja kode pada no 8 dengan kode di bawah ini
<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
</ul></li>
</ul>
</div>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a>
<ul>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</a></li>
<li><a href='http://indonesianhackeranonymous.blogspot.com/'>Edit me</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 sobat
- Nah, jika sobat ingin menambah item menubar (list), sobat 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. Sobat bisa menelitinya lagi. Tanda kutip ' atau "
Misalkan kode <div id="content-wrapper"> atau sejenisnya memang benar2 tidak ada. Sobat bisa menaruhnya di area kode header sobat. Caranya sobat bisa mengklik tombol Lompat ke widget lalu mengklik widget header sobat.
Setelah itu. Letakkan kode menubar yang berada pada langkah no 8, di bawah kode widget header blog sobat. Bisa dibawah </b:section> atau dibawah kode </div> Sebenarnya masih ada juga kode sejenis main-wrapper, header-wrapper, header-inner dll. Nah, kode menubar dapat diletakkan di kode-kode css sejenis itu.
Intinya dalam membuat menubar ini adalah sabar dan teliti.
Intinya dalam membuat menubar ini adalah sabar dan teliti.
Sekian dari saya
No comments:
Post a Comment