Cara Membuat Navigasi Menu Dengan Effect Bounce

Hai Sobat, kali ini saya akan share " Cara Membuat Navigasi Menu Dengan Effect Bounce ". Cara ini cocok bagi anda yang ingin membuat navigasi blog anda menjadi lebih menarik.
Mau tau caranya... Langsung Ke Tutorialnya...

Cara Membuat Navigasi Menu Dengan Effect Bounce

1. Masuk Ke Beranda Blogger > Template > Edit HTML
2. Cari Kode ]]></b:skin> Atau </style> Untuk Mempermudah Pencarian Anda Dapat Tekan CTRL + F
3. Masukkan Kode Di Bawah Ini Di Atas Kode ]]></b:skin> Atau </style>

#navcak-yit { background:#156AA6; overflow:hidden; }
#navcak-yit ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0; }
#navcak-yit li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0; }
#navcak-yit li a { background:#156AA6; color:#eee; display:block; font-weight:400; line-height:30px; border-left:1px solid #4B88B3; border-right:1px solid #043457; text-align:center; text-decoration:none; margin:0; padding:0 25px; }
#navcak-yit li.depan a { border-left:none; }
#navcak-yit li ul { background:#156AA6; height:auto; border:0; position:absolute; width:225px; z-index:80; box-shadow:0 1px 5px #034257; display:none; margin:0; padding:0; }
#navcak-yit li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0; }
#navcak-yit li:hover li a { background:#156AA6; }
#navcak-yit li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px; }
#navcak-yit li a:hover,#navcak-yit li:hover > a { color:#fff; }
#navcak-yit li:hover ul.hidden { display:block; }

4. Cari Kode </head>, Kemudidan Letakkan Kode Di Bawah Ini Di Atas Kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<script src='http://code.jquery.com/ui/1.8.21/jquery-ui.min.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
    $('#navcak-yit li ul').removeClass('hidden');
    $('#navcak-yit li').hover(function() {
        $('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
    }, function() {
        $('ul', this).slideUp(600, 'easeInExpo');
    });
    //]]>
</script>

Hapus Kode Yang Di Cetak Tebal Jika Sudah Punya
5. Cari Kode main.wrapper, Letakkan Kode Di Bawah Ini Di Atas Kode main.wrapper

<nav id='navcak-yit'>
    <ul>
        <li class='depan'><a href='/'>Beranda</a></li>
        <li><a href='#'>Title 2</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
        <li><a href='#'>Title 3</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
        <li><a href='#'>Title 4</a>
    <ul class='' style='display: none;'>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
        <li><a href='#'>Dropdown</a></li>
         <li><a href='#'>Dropdown</a></li>
    </ul>
        </li>
    </ul>
</nav>

6. Klik Simpan