Drop Down Menu Navigation Dengan Efek Bounce

Drop Down Menu Navigation Dengan Efek Bounce – Setelah sempat beberapa hari ini disibukkan dengan rutinitas yang begitu padat seperti tugas kuliah dan kegiatan yang lainnya yang tak bisa saya tinggalkan yang mana saya membuat saya tidak dapat membuat artikel baru lagi untuk diposting.

Nah, berhubung sekarang saya memiliki waktu luang, maka saya akan share lagi tutorial blogging yang terbaru nih, yakni Drop Down Menu Navigation Dengan Efek Bounce yang mana postingan kali ini masih ada hubungannya dengan tutorial yang sebelumnya yakni 32 Macam Menu Navigation Horizontal.

Berikut ini cara membuat Drop Down Menu Navigation Dengan Efek Bounce.

1. Login ke blogger
2. Pilih template » Edit Html » Lanjutkan.
3. Jangan lupa centang Expand template widget.
4. Cari code ]]></b:skin>. Tekan Ctrl+F untuk mempermudah pencarian.
5. Setelah ketemu, copy paste code di bawah ini dan letakkan di atas code ]]></b:skin>

/*Navigation*/ 
.menu { 
    font:normal 12px arial;
    line-height:normal; 
    text-transform:none; 
    color:#FFF;
    text-decoration:none; 
    margin:0; 
    padding:3px 0
}

.menu ul {background:#000; 
    background-image: linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
    background-image: -o-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%); 
    background-image: -moz-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%); 
    background-image: -webkit-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%); 
    background-image: -ms-linear-gradient(bottom, rgb(148,0,0) 0%, rgb(0,0,0) 60%);
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(148,0,0)),  color-stop(0.6, rgb(0,0,0)) ); 
    height:35px; 
    line-height:30px;
    -webkit-box-shadow:0 1px 5px #fff; 
    -moz-box-shadow:0 1px 5px #fff;
    box-shadow:0 1px 5px #fff; 
    margin:0; 
    padding:0
}

.menu li { 
    list-style:none; 
    color:#FFF;
    float:left; 
    display:inline; 
    position:relative; 
    margin:0;
    padding:0 
}

.menu li a { 
    display:block;
    border-left:1px solid #444; 
    border-right:1px solid #222;
    color:#FFF; 
    text-decoration:none; 
    font-weight:700;
    line-height:30px; 
    outline:none; 
    margin:0; 
    padding:2px 15px 
}

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

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

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

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

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

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

.menu li a:hover,.menu ul li a:hover{ 
    color:#ccc; 
    background:#000 
} 

6. Kemudian cari code </head>, Tekan Ctrl+F untuk mempermudah pencarian.
7. Setelah ketemu copy paste kode di bawah ini dan letakkan di atas code </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> 
<script src='http://hompimpa.googlecode.com/files/jquery-easing-1.3.pack.js' type='text/javascript'/> 
<script type='text/javascript'>
    $(function() { 
        $(&#39;.menu li&#39;).hover(function() { 
            $(this).children(&#39;ul&#39;).filter(&#39;:not(:animated)&#39;).slideDown(700,&#39;easeOutBounce&#39;); }, function() { 
            $(this).children(&#39;ul&#39;).slideUp(400); 
         }); 
    }); 
</script>

8. Setelah itu kembali ke dashboard » Pilih Tata letak » Tambah gadget » Html/JavaScrip. Dan copy paste code di bawah ini.

<div class='menu'>
    <ul>
        <li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDIF3ONc0dsKbRxGv5PLPozpcV7Fnb4Sao2kr10ELz8zeZwH7ZtHf2DN12_lSOwcgR64bjDHMhfBdBKIgUibM-qdE4vqsuLIB8p2-9yG9SaOMuYl_ws4SCuwDmk-zUswgjon2kANxIKb0/s1600/home_white.png' style='padding:0px;'/></a></li>
        <li><a class='' href='/'>Home</a></li>
        <li><a href='http://junedalbughisy.blogspot.com/2012/03/biodataku.html' target='_blank'>About me</a></li>
        <li><a class='arrow' href='#'>Contact me</a>
    <ul>
        <li><a href='https://plus.google.com/100968599480471308297' target='_blank'>Goggle +</a></li>
        <li class='hr'/>
        <li><a href='https://www.facebook.com/juned.abdullah' target='_blank'>Contact on Facebook</a></li>
        <li class='hr'/>
        <li><a href='https://twitter.com/#!/junedalbughisy' target='_blank'>Contact on Twitter</a></li>
    </ul>
</li>
<li><a href='http://junedalbughisy.blogspot.com/2012/04/daftar-isi.html' target='_blank'>Daftar isi</a></li>
<li><a href='http://junedalbughisy.blogspot.com/2012/04/tips-dan-trik-blogging.html' target='_blank'>Tips dan trik bloging</a></li>
<li><a href='http://junedalbughisy.blogspot.com/2012/03/cerita-lucu-terbaru-2012.html' target='_blank'>Cerita lucu</a></li>
<li><a href='http://junedalbughisy.blogspot.com/search/label/Kesehatan' target='_blank'>Kesehatan</a></li>
<li><a href='http://junedalbughisy.blogspot.com/search/label/Internet' target='_blank'>Internet</a></li>
</ul>

</div>

9. Dan yang terkahir simpan/save template.

Semoga tutorial kali ini bermanfaat Happy blogging