Tuesday, March 12, 2013

Cara Membuat Drop Menu di Blogger

Posted by gta3andreas On 12:38 AM No comments
Kali ini saya ingin membagikan tips untuk anda, cara untuk membuat drop menu di Blogger. (supaya lebih keren, karena menu dalam blogger tidak ada variasi tambahan seperti menu yang sering kita temui di sebuah web) gambar diatas merupakan contoh drop menu yang saya gunakan di blogg ini. Saya dapatkan tips ini dari blogger,  langsung saja ke TKP. Berikut langkah2nya.


         1. Login di blogger anda
2. Masuk ke menu 'Tata Letak' dan 'tambah Gadget' pada posisi yang anda kehendaki
3. Pilih 'HTML /JavaScript dan masukan kode script berikut ini.





<style>
.clear{clear:both}
.navigasi{position:relative;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0}
.navigasi ul{margin:0;padding:0}
.navigasi ul li{float:left;list-style:none;position:relative}
.navigasi ul li a{display:block;color:#404040;text-decoration:none;padding:5px}
.navigasi ul li a:hover{background:#404040;color:#fefefe}
.navigasi ul li ul{position:absolute;display:none;width:150px;background:#fefefe;box-shadow:0 1px 4px #e0e0e0;-webkit-box-shadow:0 1px 4px #e0e0e0;-moz-box-shadow:0 1px 4px #e0e0e0;border:1px solid #e0e0e0;margin:0 auto}
.navigasi ul ul ul{display:none;position:absolute;right:-150px;top:0}
.navigasi ul li:hover > ul,.navigasi ul ul li:hover > ul{display:block}
.navigasi ul li.clear,.navigasi ul ul li{float:none}
</style>
<nav class="navigasi">
 <ul>
  <li><a href="#">Beranda</a></li>
  <li><a href="#">Kategori 1</a>
   <ul>
    <li><a href="#">Sub Menu 1.1</a></li>
    <li><a href="#">Sub Menu 1.2</a>
     <ul>
      <li><a href="#">Sub Menu 1.2.1</a></li>
      <li><a href="#">Sub Menu 1.2.2</a>
       <ul>
        <li><a href="#">Sub Menu 1.2.2.1</a></li>
        <li><a href="#">Sub Menu 1.2.2.2</a></li>
        <li><a href="#">Sub Menu 1.2.2.3</a></li>
        <li><a href="#">Sub Menu 1.2.2.4</a></li>
       </ul>
      </li>
      <li><a href="#">Sub Menu 1.2.3</a></li>
      <li><a href="#">Sub Menu 1.2.4</a></li>
     </ul>
    </li>
    <li><a href="#">Sub Menu 1.3</a></li>
    <li><a href="#">Sub Menu 1.4</a>
     <ul>
      <li><a href="#">Sub Menu 1.4.1</a></li>
      <li><a href="#">Sub Menu 1.4.2</a></li>
      <li><a href="#">Sub Menu 1.4.3</a></li>
      <li><a href="#">Sub Menu 1.4.4</a></li>
     </ul>
    </li>
   </ul>
  </li>
  <li><a href="#">Kategori 2</a>
   <ul>
    <li><a href="#">Sub Menu 2.1</a></li>
    <li><a href="#">Sub Menu 2.2</a></li>
    <li><a href="#">Sub Menu 2.3</a></li>
   </ul>
  </li>
  <li class="clear"></li>
 </ul>
</nav>

Sebelum Anda menyimpan gadget atau kode Drop Down Menu pada BloggerAnda, sesuaikan kode  diatas terlebih dahulu. Tanda Pagar silahkan ganti dengan link atau url. Sedangkan untuk kode yang dikurung dua tanda petik (Exp: Navigasi, Sub menu, dsb) dapat Anda ganti dengan judul laman, judul url ataupun keterangan lainnya. Selanjutnya silahkan modifikasi sesuka hati anda.

0 comments:

Post a Comment

komentarmu, aku tunggu! no spam!

Site search

    Partner

    Disclaimer

    Maindakon Maindakon merupakan blogg yang berisi tentang berbagai informasi dimana kami tidak menjamin bahwa informasi tersebut benar 100%. Semua posting ditulis sesuai dengan refrensi yang kami dapatkan. Semua tips yang ditulis sebatas saran atau sugesti untuk memberikan solusi atau sekedar berbagi info yang dimana kami tidak menjamin benar 100%.