Cara Membuat Menu Bar pada Blog dengan Dropdown V.2

Setelah saya cobakan berbagai cara membuat menubar dropdown hasil googling ternyata kita harus pintar-pintar memilih. Tidak semua tips membuat menubar dropdown support pada setiap template.

Dalam hal ini saya haturkan kepada para blogger beberapa tips membuat menubar yang dibagi ke dalam beberapa posting.

langkah-langkahnya:

• Login pada blogger.
• masuk ke halaman Template.
• Edit Template HTML lalu download template lengkap.
• Klik centang pada Expand Template Widget.
• Cari kode ]]></b:skin> (gunakan ctrl+f).
• Pasang kode di bawah ini tepat di atas kode ]]></b:skin>

#menubar{
border-bottom:4px solid #ff0000;
width:1025px;
height:32px;
background:#000000;
float:center;
margin-bottom:3px;
}
#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{
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 {
background: #ff0000;
color: #fff;
text-decoration:none;
}
#menubar li li a, #menubar li li a:link, #menubar li li a:visited{
font-size: 12px;
background: #ff0000;
color: #fff;
text-decoration:none;
width: 150px;
padding: 0px 10px;
line-height:30px;
}
#menubar li li a:hover, #menubar li li a:active {
background: #000000;
color: #ffffff;
}

#menubar li ul{
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
margin-top:32px;
border:1px solid ##ff0000;
}
#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
}

• Selanjutnya cari kode <div id="content-wrapper"> 
• Pasang kode di bawah ini tepat di Atas kode <div id="content-wrapper">

<div id='menubar'>

<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>

<li><a href='#'> audi video </a>
    <ul>
    <li><a href=' http://eppoh.blogspot.com/search/label/ audio '>audia   </a></li>
    <li><a href=' http://eppoh.blogspot.com/search/label/  '>video  </a></li>   
    <li><a href=' http://eppoh.blogspot.com/search/label/  mp3'>  mp3</a></li>
    <li><a href=' http://eppoh.blogspot.com/search/label/  mp4'>mp4  </a></li>
    </ul></li>

<li><a href='#'>   Browser</a>

    <ul>
    <li><a href=' http://eppoh.blogspot.com/search/label/ mozilla  '>mozilla   </a></li>

    <li><a href=' http://eppoh.blogspot.com/search/label/avant  '> avant </a></li>
    </ul></li>

<li><a href='#'> game </a>
    <ul>
    <li><a href=' http://eppoh.blogspot.com/search/label/ poker '> poker  </a></li>
    <li><a href=' http://eppoh.blogspot.com/search/label/ marble '>marble  </a></li>   
    </ul></li>

<li><a href='#'>  komputer </a>

    <ul>
    <li><a href=' http://eppoh.blogspot.com/search/label/ hardware '>hardware   </a></li>
    <li><a href=' http://eppoh.blogspot.com/search/label/modem  '> modem </a></li>
    </ul></li>

<li><a href='#'> gsm</a>
    <ul>
    <li><a href=' http://eppoh.blogspot.com/search/label/ as '>as   </a></li>
    <li><a href=' http://eppoh.blogspot.com/search/label/ simpati '>simpati  </a></li>   
    </ul></li>
</ul>
<br style='clear: left'/>
</div>

• Simpan Template dan lihat hasilnya

Note :

• Menubar ini, saya ambil sambel pada url - label. Tapi anda bebas untuk menyimpan alamt sesuai kesukaan kita.
• ganti alamat url yang berwarna orange  sesuai kesukaan
• ganti judul atau nama yang berwarna biru muda sesuai dengan selera
• ganti tulisan yang berwana merah sesuaikan - terserah
• Sesuaikan kode #ff0000 (border bawah menubar), 1025px (lebar menubar), #000000 (background menubar)
• Copy kode yang berwarna Merah tepat dibawah kode yang warna merah tersebut, jika kalian ingin menambahkan lebih banyak item Menubar.

anakgilaonline