Membuat Menubar Pada Blog

Posted on Juni 15, 2013

0


Agan agan yang masih kebingungan dengan cara membuat menubar pada blog lihat gambar di atas, kali ini om Rama akan menghadirkan triknya untuk agan dan aganwati, baiklah kita langsung saja ke TKP.

  1. Pertama tama tentunya agan dan aganwati harus login ke Blog agan. secara otomatis agan dan aganwati berada di dashbor
  2. Kemudian masuk ke menu Template, edit HTML
  3. Cari kode ]]></b:skin> gunakan Ctrl + F untuk memudahkan pencarian
  4. Pasang kode dibawah ini diatas 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
}

5. Berikutnya cari kode <div id=”content-wrapper”> 
6. Pasang kode dibawah ini diatas kode <div id=”content-wrapper”> 

<div id=’menubar’>
<ul>
<li><a expr:href=’data:blog.homepageUrl’>Home</a></li>
<li><a href=’http://r-cliks.blogspot.com/‘>Edit me</a></li>
<li><a href=’http://r-cliks.blogspot.com/‘>Edit me</a></li>
<li><a href=’http://r-cliks.blogspot.com/‘>Edit me</a>
<ul>
<li><a href=’http://r-cliks.blogspot.com/‘>Edit me</a></li>
<li><a href=’http://r-cliks.blogspot.com/‘>Edit me</a></li>
</ul></li>
</ul>
</div>

7.Simpan template
8. Untuk membuat sub menu (drop down) ubah kode pada No 6

Keterangan:

  • Ganti tulisan berwarna Merah dengan url link menubar yang agan inginkan, misal: link postingan, link kategori, link halaman statis dan sebagainya.
  • Ganti tulisan berwarna Biru (Edit me) dengan tulisan judul menubar tersebut, seperti: About, Contact, dan sebagainya.
  • Untuk mengubah panjang menubar agan bisa mengganti tulisan 900px menjadi sesuai dengan keinginan agan.
Posted in: /Tutorial