Berita Terbaru :

Membuat Menu Horizontal Drop Down di Blog



Membuat Menu Horizontal Drop Down di Blog - Menu Horizontal Drop Down adalah Menu yang berbentuk memanjang dan jika kita menyorot mouse di menu tersebut maka akan keluar anak - anak dari sub menu tersebut .

Menu ini sangat berguna bagi blog, karena saat pengunjung mencari kategori artikel yang dicari, bisa langsung mencari di menu drop down tersbut.


Jika ingin Memasang di blog anda silahkan ikuti langkah - langkah berikut ini :


1. Login Blogger
2. Masuk ke " Template > Edit Html "
3. Cari kode ]]></b:skin> Jika sudah ketemu, copy kode dibawah ini, dan paste diatas code ]]></b:skin>


#NavbarMenuAtas{ background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir3EP-A83ByeEWQgH19Cw9iJ1SsrgcCDeyIa1vnVzqyCd4oCso6KDSlKd4KtvmLnm-c-78ABWTVsn7zJp48wvIiA5GLjJrAhdUw03EqdSSuUVA903oL_I_z1RfP1mBFQLZWcVMijboz1S-/?imgmax=800) repeat-x;width:960px; height:40px; color:$navcolor; margin:0 auto; font: bold 8px Arial, Tahoma, Verdana;}
#NavbarMenuAtasleft{ width:650px; float:left; } 


4. Cari Kode <div id='header'> atau <div id='header-wrapper'> . Jika sudah ketemu copy kode di bawah ini dan taruh di atas kode <div id='header'> atau <div id='header-wrapper'>

<div id='NavbarMenuAtas'>
       <div id='NavbarMenuAtasleft'>
      <ul id='nav'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li>
          <a href='#'>Page #1</a>
          <ul>
            <li><a href='#'>Sub Page #1</a></li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li>
          </ul>
        </li>
        <li><a href='#'>Page #2</a></li>
             <li><a href='#'>Sub Page #1</a></li>
            <li><a href='#'>Sub Page #2</a></li>
            <li><a href='#'>Sub Page #3</a></li> 
      </ul>
    </div>
  </div>


Anda bisa merubah :
  • Yang berwarna Hijau dengan Sub Menu
  • Yang berwarna Biru dengan Menu
  • Yang berwarna Merah dengan link tujuan Menu

5. Simpan




Posting Komentar

Kami akan mengkonfirmasi komentar Anda pada alamat ini ketika anda meninggalkan komentar di blog ini. Tinggalkan komentar anda jika perlu.

Daftar Isi

 
Return to top of page Copyright © 2010-2014 | Stelitec Informatika