cara Membuat Menu Blog

Teman Teman Pecinta Bloggers...... Ni ada sedikit Info Buat anda....... Infocara membuat menu Bar Di  BloG..

Untuk Lebih Jelas Teman Mari Lihat!!!!

1. Login pada Blogger

2. Masuk ke Rancangan > Edit HTML

3. Klik pada Expand Template Widget

4. Kemudian Cari kode ]]></b:skin> (untuk mempermudah gunakan ctrl+f)

5. Letakan kode di bawah ini di atas kode ]]></b:skin>

#menubar{
width:900px;
height:32px;
background:#de360f;
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">

7. Letakan kode di bawah ini di Atas kode <div id="content-wrapper">

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li>
</ul>
</div>

8. Save Template dan lihat hasilnya.

Tambahan :

Tidak lengkap rasanya klo blog kita tidak ada sub menu (menu dropdown),kali ini saya akan memberikan sedikit cara untuk membuatnya. Agar mudah membuatnya, ganti saja kode No.7 dengan kode di bawah ini

<div id='menubar'>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a>
<ul>
<li><a href='Alamat blog sobat'>Edit me</a></li>
<li><a href='Alamat blog sobat'>Edit me</a></li></ul></li>
</ul>
</div>

Keterangan:

• Ganti tulisan yang berwarna Merah dengan url link yang diinginkan, misalnya : link postingan, link kategori, link halaman statis atau lainnya
• Ganti tulisan berwarna Hijau (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