trick

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