Membuat Navigasi Menu Dropdown Bounce Effect di Blogger

Dengan memasang menu navigasi pada blog, dapat memudahkan pengunjung untuk mencari artikel dalam satu kelompok/ kategori yang di letakan dalam navigasi ini. Misalkan pada menu navigasi tertera "Widget" maka pada menu drop downnya bisa diisi pecahan-pecahan dari kategori Widget ini misalnya widget facebook, widget email subcribe, widget Google Plus dan lain sebagainya.

Baiklah sobat pada kesempatan ini seocips akan membagikan tentang cara membuat navigasi menu dropdown dengan effect easeOutbounce. Sebelumnya juga seocips telah membagikan menu navigasi yang lebih keren dari menu ini, seperti mega menu navigasi dengan gambar perlabel di blog dan menu navigasi multi dropdown responsive di Blogger.

Cara Membuat Navigasi Menu Dropdown Bounce Effect

1. Jika sudah ada menu pada template maka dihapus saja, tapi jika menunya lebih bagus dari menu ini sebaiknya berpikir 4x sebelum menghapusnya.
2. Selanjutnya simpan kode di bawah ini di atas main-wrapper . Ingat nama element setiap template berbeda tergantung pembuatnya.
<nav id='navseocips'>
    <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>
3. Simpan CSS di atas kode ]]></skin> atau </style>.
#navseocips { background:#156AA6; overflow:hidden; }
#navseocips ul { float:left; height:30px; list-style:none; overflow:hidden; margin:0; padding:0; }
#navseocips li { float:left; text-shadow:1px 1px 2px #0066B3; padding:0; }
#navseocips 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; }
#navseocips li.depan a { border-left:none; }
#navseocips 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; }
#navseocips li li { display:block; float:none; width:225px; border-top:1px solid #4B88B3; border-bottom:1px solid #043457; margin:0; padding:0; }
#navseocips li:hover li a { background:#156AA6; }
#navseocips li ul a { display:block; height:30px; font-size:12px; font-style:normal; text-align:left; margin:0; padding:0 10px 0 15px; }
#navseocips li a:hover,#navseocips li:hover > a { color:#fff; }
#navseocips li:hover ul.hidden { display:block; }
4. Simpan script di atas kode </head>.
Catatan : jika jquery pada kode berwarna merah dibawah sudah ada pada template anda, maka jangan di masukan lagi. cukup satu saja.
<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[
    $('#navseocips li ul').removeClass('hidden');
    $('#navseocips li').hover(function() {
        $('ul', this).filter(':not(:animated)').slideDown(600, 'easeOutBounce');
    }, function() {
        $('ul', this).slideUp(600, 'easeInExpo');
    });
    //]]>
</script>
5. Save dan lihat hasilnya.

Ada banyak macam menu navigasi yang bisa kamu gunakan, saat ini ada yang tampilannya sederhana seperti menu navigasi tadi, atau tapilan yang menarik seperti navigasi menu Lavalamp , atau juga menu navigasi yang bisa kamu letakan sesuka hati di sidebar blog kamu seperti menu navigasi click me di sidebar blog.

Nah, sekian navigasi menu dropdown yang dapat dibagikan seocips saat ini. Semoga Bermanfaat.
2 Komentar untuk "Membuat Navigasi Menu Dropdown Bounce Effect di Blogger"

Gan Klo Terapkan Efek Bounce Nya aja tanpa Sub Menu nya Gimana??

Mau terapkan efek bounce tanpa sub menu maksudnya? terapkan dimana? efek bounce itu ada pada sub menu/dropdown menu, tanpa submenu maka tak ada efek bounce, tanpa submenu gak ada gunanya script diatas, script gak ada gunanya sebaiknya di hapus. Maka jadilah menu biasa.