CARA MEMBUAT MENU BAR PADA BLOG DENGAN DROPDOWN

Cara Membuat Menu Bar pada Blog dengan Dropdown

Pada kesempatan kali ini saya akan menjelaskan bagaimana Cara Membuat Menu Bar pada Blog dengan Dropdown setelah sebelumnya saya share SPEED GEAR V.7.1+CRACK FULL VERSION. Saya share postingan ini karena saya kemarin baru saja membuatnya sendiri di Blog Surya Comunity Seven ini, dan menu bar bawaan template saya tidak support sama Dropdown (submenu yang turun kebawah). oke dah kalo gitu langsung aja gin kita ketahap[ pembuatannya yah kawan :

• 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
• Maka hasil yang kalian dapat akan persis seperti Menubar yang ada di Blog Anak Gila Online ini. 

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.

Jangan lupa komentarnya.......

 SELAMAT MENCOBA !!!