Cara Membuat Menu Bar pada Blog dengan Dropdown

By  at 19.40    

hallo kawan-kawan semua, pada kesempatan kali ini Bang Dayat akan menjelaskan bagaimana Cara Membuat Menu Bar pada Blog dengan Dropdown setelah sebelumnya saya share Cara Meletakkan Laptop Yang Baik Saat Sedang digunakan. kenapa saya share postingan ini karena saya kemarin baru saja membuatnya sendiri di Blog Anak Gila Online 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.
Oke kawan-kawan semua, selesailah pembahasan kita kali ini tentang Cara Membuat Menu Bar pada Blog dengan Dropdown, sekarang silahkan kalian yang bereksperimen sendiri yah pada blog kalian. Semoga berhasil yah..hehehe Salam Bang Dayat


Jangan Lupa Berikan Komentar Yah :)


Cara Meletakkan Laptop Yang Baik Saat Sedang digunakan

Original from: http://anakgilaonline.blogspot.com/
Copyright Anak Gila Online - Just For Fun