Cara membuat Menu Horisontal Drop Ala kapanLagi

 Cara Membuat Menu Horzontal  Drop Ala kapan Lagi - Setelah saya jalan-jalan di tempat sahabat yaitu: hompimpaalaihumgambreng.blogspot.com Saya menemukan cara membuat Menu Horisontal Drop bercabang Ala KapanLagi.com.Namun sayang Trik itu tidak bejalan saya pasang di Template Facewoman Blog ini.Tapi untuk Template Blog tertentu cara ini memang efektif dan bisa berfusingnya Dengan baik.Untuk melihat Hasil dari menu Horisontal Drop Ini Lihat Demo dibawah ini :

Lihat Demo Hasil

Untuk caran lebih jelas  ikuti langkah-langkah tutorial di bawah ini :

1.Pertama-tama anda Login Blogger - Template -Edit Template - Expand Template Widget Lalu cari Kode ]]</b:skin> Untuk mempercapat pencarian Gunakan Cntrl + F lalu masukkan Kode ]]</b:skin> Stelah anda ketemukan lalu Copy Kode di bawah ini letakkan Di atas Kode ]]</b:skin> :

.hompimenu {
  font:normal 12px Cambria,"Times New Roman",Times,serif;
  line-height:normal;
  text-transform:uppercase;
  margin:5px 0px;
  padding:0px 0px;
  color:white;
  text-decoration:none;
}

.hompimenu ul {
  height:34px;
  line-height:34px;
  background-color:#333;
  margin:0px 0px 10px;
  padding:0px 0px;
  border:2px solid #e6e6e6;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
}

.hompimenu li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
  color:white;
  float:left;
  display:inline;
  position:relative;
}

.hompimenu li a {
  display:block;
  background-color:#333;
  border-left:1px solid #444;
  border-right:1px solid #222;
  margin:0px 0px;
  padding:0px 15px;
  color:white;
  text-decoration:none;
  font-weight:bold;
  line-height:34px;
  text-shadow:1px 1px 2px #000;
  outline:none;
}

.hompimenu li ul {
  position:absolute;
  z-index:10;
  left:0px;
  top:100%;
  height:auto;
  margin:0px 0px;
  padding:0px 0px;
  width:170px;
  -webkit-box-shadow:0 1px 5px #000;
  -moz-box-shadow:0 1px 5px #000;
  box-shadow:0 1px 5px #000;
  display:none;
}

.hompimenu li ul a {
  border-left:none;
  border-right:none;
  border-top:1px solid #444;
  border-bottom:1px solid #222;
  display:block;
}

.hompimenu li ul li {
  float:none;
  display:block;
  width:auto;
}

.hompimenu li ul ul {
  top:0px;
  left:100%;
}

.hompimenu li a:focus {
  background-color:#666;
  border-left-color:#777;
  border-right-color:#555;
}

.hompimenu ul li a:focus {
  background-color:#666;
  border-top-color:#777;
  border-bottom-color:#555;
}

.hompimenu li a:hover,
.hompimenu ul li a:hover {color:#ccc;}

2.Langkah Kedua yaitu tinggal kita cari Kode  </head> Untuk Mempercepat Proses Pencarian Kode gunakan Ctrl+F kalau kode sudah di ketemukan copy kode di bawah ini lalu letakkan tepat di atas Kode </head>  :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript">
$(function() {
    $('.hompimenu li').hover(function() {
        $(this).children('ul').filter(':not(:animated)').slideDown(400);
    }, function() {
        $(this).children('ul').slideUp(400);
    });
});
</script>

3.Langkah ketiga Lakukan copy code di bawah ini letakkan di bawah header atau Tambah widget add java script :

<div class='hompimenu'>

    <ul>

        <li><a href='#'>BERANDA</a></li>

        <li><a href='#'>JURNAL</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KOMENTAR</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a>
                    <ul>
                        <li><a href='#'>Tiga Satu</a></li>
                        <li><a href='#'>Tiga Dua</a></li>
                        <li><a href='#'>Tiga Tiga</a></li>
                        <li><a href='#'>TIga Empat</a></li>
                        <li><a href='#'>Tiga Lima</a></li>
                    </ul>
                </li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

        <li><a href='#'>KONTAK</a>
            <ul>
                <li><a href='#'>Satu</a></li>
                <li><a href='#'>Dua</a></li>
                <li><a href='#'>Tiga</a></li>
                <li><a href='#'>Empat</a></li>
                <li><a href='#'>Lima</a></li>
            </ul>
        </li>

    </ul>

</div> 

4.Langkah Terakhir tinggal save Template.

Keterangan :

1. Untuk lebih membuat kurang lebih mirip menu drop kapanlagi.com anda tinggal Otak-atik Kode yang anda pastelkan di atas kode ]]</b:skin> tadi.
2. Jika Template Sobat Sudah ada kode mirip <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'> Kode itu sudah tidak usah di pasang lagi.
3. Untuk lagkah save Template, Gunakan Preview/Pratinjau dulu sebelum simpan Template Untuk menjaga hal yang tidak di inginkan terhadap template sobat.

Untuk lebih jelas langkah di atas kunjungi saja situs resminya di http://hompimpaalaihumgambreng.blogspot.com/

 Sekiranya itu saja  Cara membuat Menu Horisontal Drop mirip kapanLagi Semoga cara di atas bisa berfungsi dengan baik untuk template blog anda.