Cara Membuat Menu Bar Pada Blog Dengan Drop Down

Nah sekarang saya akan membagi trick-trik Cara Membuat Menu Bar DRop Down yang seperti gambar di atas, okeh langsung saja cekidot:

• 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 dan lihat blog
• ssekian post kali ini trimakasihb

perkenalan blog

hallo semua semoga blog ini sangat bermanfaat bagi anda!!!!!!!!
silakan pilih menu pada menu bar yang kalian mau disitu terdapat banyak informasi dan trick-trik yang kalian inginkan,...

SEKIAN TRIMAKASIH DAN JANGAN LUPA LIKE BLOG INI !!!!!!!