Wednesday, January 7, 2015

Cara membuat menubar di blog

Cara membuat menubar di blog

Jika kita membuat blog dan ternyata di template blog yang kita buat belum ada menu-menunya. Cara membuat menubar di blog tidak sulit, berikut ini langkah-langkah pembuatannya:

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> (kopi semua kode berikut ini):

#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, sobat bisa menaruh dielemen div id lainnya. Biasanya template blog terdapat kode seperti <div id='header.... Jadi, bila tidak ada kita 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://t4belajar-arabic.blogspot.com/'>Edit Disini</a></li>
<li><a href='http://t4belajar-arabic.blogspot.com/'>Edit
Disini</a></li>
<li><a href='http://t4belajar-arabic.blogspot.com/'>Edit
Disini</a>
<ul>
<li><a href='http://t4belajar-arabic.blogspot.com/'>Edit
Disini</a></li>
<li><a href='http://t4belajar-arabic.blogspot.com/'>Edit
Disini</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 kita

0 comments:

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More