Cara Membuat Menu Bar pada Blog dengan Dropdown

Baca Juga

• 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='https://plus.google.com/115707721196811032963/'>About Me</a></li>

<li><a href='#'>Contact Me</a>
<ul>
<li><a href='https://plus.google.com/115707721196811032963/'>Google +</a></li>
<li><a href='https://www.facebook.com/dayatt.widiapratama'>Facebook</a></li>
<li><a href='http://twitter.com/dayattdymee'>Twitter</a></li>
<li><a href='http://www.yahoo.com/'>Yahoo!</a></li>
</ul></li>
</ul>
</div>

• Simpan Template dan lihat hasilnya .
• Note :
  
• 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.
• Ganti tulisan yang berwarna Biru diatas dengan URL anda sendiri.
• Ganti tulisan yang Bergaris Bawah dengan nama menu anda sendiri.