27 Februari 2010

Membuat Menu Bar Di Bawah Header Blog

Para penggila blogging sekalian, kali ini saya ingin berbagi pengalaman dengan teman-teman. Saat ingin menambah menubar pada blog ini, saya mengalami banyak kegagalan. Namun saya masih penasaran. Mbah google pun saya mintain bantuan, lumayan membantu sih tapi saya tidak puas karena tidak seperti yang diharapkan. Setelah saya mengotak atik html nya akhirnya saya berhasil deh...
Nah...seperti ini caranya:
  • Pertama cari kode ]]> (gk perlu centang Expand Widget Templates)
  • Kedua letakkan kode di bawah ini di atas kode ]]>
/* menu bar */
#menubar{
margin: 0;
padding: 0;
float:left;
border:1px solid #FFD700;
width:100%;
background:#000000;
}

#menubar li{
margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial;
}

#menubar li a{
display: block;
margin: 0;
padding: 5px 12px;
background:#000000;
color: #FFD700;
text-align: center;
text-decoration: none;
border:0px solid #FFD700;
border-right:0.5px solid #FFD700;
}

#menubar li a:hover{
background:
#FOF8FF
;
color:#000000; /* Warna teks saat kursor mouse berada di atasnya */
}

#menubar div{
position: absolute;
visibility: hidden;
}


  • Ketiga cari kode seperti ini atau yang mirip
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='Sanjaya Granat (Header)' type='Header'/>
</b:section>

"yang penting ada title blog anda di kode tsb, brarti itulah kode yg diharapkan"

  • Terakhir letakkan kode di bawah ini di bawah kode seperti diatas
<ul id='menubar'>
<li><a href='xxx'>zzz</a></li>
<li><a href='xxx'>zzz</a></li>
<li><a href='xxx'>zzz</a></li>
<li><a href='xxx'>zzz</a></li>
<li><a href='xxx'> zzz </a></li>
<li><a href='xxx'>zzz</a></li>
</ul>
  • Save deh....

Keterangan:
Untuk yang tulisan XXX, ganti dengan alamat yang diinginkan pada menu
Untuk yang tulisan ZZZ ganti dengan judul menu yang Anda

"SEMOGA SUKSES"

0 komentar:

Posting Komentar