Jumat, 20 April 2012

Cara Membuat Menu JQuery Dengan Animasi Di Blog

Cara Membuat Menu JQuery Dengan Animasi - Mungkin sobat sudah banyak melihat tutorial cara membuat menu jquery dengan hasil yang bermacam-macam. Kali ini saya mau sharing Cara Membuat Menu Jquery Dengan Animasi sobat cukup copy paste dan mengikuti langkah-lagkahnya dengan benar di jamin berjalan mulus.
Cara Membuat Menu JQuery Dengan Animasi ini biasanya di tempatkan dibawah header. Untuk cara pemasangnya ikuti saja langkah-langkah dibawah ini.
1. Sobat harus login ke Akun Blogger sobat.
2. Klik menu Rancangan.
3. Klik Edit HTML dan centang Expand Widget Template
4. Kemudian cari kode ini ]]></b:skin> gunakan Ctrl+F atau F3 untuk pencarian lebih cepat.
5. Copas kode dibawah ini.

#lava { background-color:#274D5A; background-image:-webkit-linear-gradient(top,#274D5A,#1E3B45); background-image:-moz-linear-gradient(top,#274D5A,#1E3B45); background-image:-ms-linear-gradient(top,#274D5A,#1E3B45); background-image:-o-linear-gradient(top,#274D5A,#1E3B45); background-image:linear-gradient(top,#274D5A,#1E3B45); -webkit-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px rgba(0,0,0,0.4); box-shadow: inset 0px 1px 0px rgba(255,255,255,0.2), 0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; position:relative; text-align:center; height:30px; } #lava ul { margin:0px 0px; padding:0px 0px; list-style:none; position:absolute; left:0px; top:0px; z-index:100; } #lava ul li { position:relative; float:left; } #lava ul li a { display:block; padding:0px 15px; font:bold 11px/30px tahoma,Verdana,Arial,Sans-Serif; text-decoration:none; color:#70A4B2; text-shadow:0px -1px 0px rgba(0,0,0,0.4); } #lava #box { position:absolute; left:0px; top:0px; z-index:50; background-color:#1E3B45; background-image:-webkit-linear-gradient(bottom,#274D5A,#1E3B45); background-image:-moz-linear-gradient(bottom,#274D5A,#1E3B45); background-image:-ms-linear-gradient(bottom,#274D5A,#1E3B45); background-image:-o-linear-gradient(bottom,#274D5A,#1E3B45); background-image:linear-gradient(bottom,#274D5A,#1E3B45); } #lava #box .head { height:30px; border-left:2px solid #AD1717; } #lava li ul { width:170px; height:auto; background-color:#274D5A; position:absolute; top:100%; left:0px; z-index:77; border-left:2px solid #AD1717; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); display:none; } /* CSS Fallback */ #lava li:hover ul.fallback {display:block;} #lava li li { float:none; display:block; text-align:left; } #lava li li a {padding:0px 15px;} #lava li li a:hover {background-color:#1E3B45;}

6. Taruh kodenya diatas kode  nomor 5.
7. Kemudian cari kode </head>
8. Copas kode dibawah ini dan letakkan di atas kode nomor 7.

<script type="text/javascript"> //<![CDATA[ // Original: http://www.queness.com/post/530/simple-lava-lamp-menu-tutorial-with-jquery // Modified by Taufik Nurrohman: http://hompimpaalaihumgambreng.blogspot.com $(function() { // Append the floating bar $('#lava').append('<div id="box"><div class="head"></div></div>') // remove the fallback class if JavaScript enabled .find('ul.fallback').removeClass('fallback'); // Retrieve the selected item position and width var default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left), default_width = $('#lava li.selected').width(); // Set the floating bar position and width $('#box').css({left: default_left}); $('#box .head').css({width: default_width}); // if mouseover the menu item $('#lava > ul > li').mouseenter(function() { // Get the position and width of the menu item left = Math.round($(this).offset().left - $('#lava').offset().left); width = $(this).width(); // Set the floating bar position, width and transition $('#box').stop(false, true).animate({left:left},{duration:1000, easing:'easeOutElastic'}); $('#box .head').stop(false, true).animate({width:width},{duration:1000, easing:'easeOutElastic'}); $('ul', this).filter(':not(:animated)').slideDown(600, 'easeInOutExpo'); // if user click on the menu }).click(function() { // reset the selected item $('#lava li').removeClass('selected'); // select the current item $(this).addClass('selected'); }); // If the mouse leave the menu item, // hide the dropdown menu and reset the floating bar to the selected item $('#lava li').mouseleave(function() { $('ul', this).slideUp(600, 'easeOutQuart'); }).parents('#lava').mouseleave(function() { // Retrieve the selected item position and width default_left = Math.round($('#lava li.selected').offset().left - $('#lava').offset().left); default_width = $('#lava li.selected').width(); // Set the floating bar position, width and transition $('#box').stop(false, true).animate({left:default_left},{duration:1500, easing:'easeOutElastic'}); $('#box .head').stop(false, true).animate({width:default_width},{duration:1500, easing:'easeOutElastic'}); }); }); //]]> </script>

9. Save Template.
10. Kemudian pilih Tata Letak >> Add Gadget >> Pilih Java Scrip/HTML.
11. Copas kode dibawah ini.


<nav id='lava'>
    <ul>
        <li class='selected'><a href='#'>Beranda</a></li>
        <li><a href='#'>Profil</a></li>
        <li><a href='#'>Jurnal</a>
            <ul class='fallback'>
                <li><a href='#'>2007</a></li>
                <li><a href='#'>2008</a></li>
                <li><a href='#'>2009</a></li>
                <li><a href='#'>2010</a></li>
                <li><a href='#'>2011</a></li>
                <li><a href='#'>2012</a></li>
            </ul>
        </li>
        <li><a href='#'>Komentar</a></li>
        <li><a href='#'>Kontak</a></li>
        <li><a href='#'>Cari</a>
            <ul class='fallback'>
                <li><a href='#'>CSS</a></li>
                <li><a href='#'>JQuery</a></li>
                <li><a href='#'>HTML</a></li>
                <li><a href='#'>JavaScript</a></li>
            </ul>
        </li>
    </ul>
</nav>

NB : warna merah ganti dengan link tujuan tombol dan warna biru ganti dengan menu yang sobat inginkan. Cara di atas sudah saya coba dan hasilnya memuaskan dengan template bawaan blogger.

12. Save atau Simpan.

Nah itu tadi Cara Memasang Menu JQuery Dengan Animasi dan semoga cara diatas bisa menambah blog sobat lebih cantik dan lebih menarik. Untuk melihat hasilnya sobat bisa klik ini DEMO. Semoga artikel saya bermanfaat bagi sobat.... Kritik dan saran bisa sobat tulis di kotak komentar.


SUMBER
Baca Juga Artikel Di Bawah Ini!!

3 komentar:

  1. maksudnya link tujuan tombol itu apa?
    please... bantu aku segera... T_T

    BalasHapus
  2. TOKO HANDPHONE TERBESAR TERLENGKAP TERMURAH TERPERCAYA NABILA SHOP Produk dijamin asli orginal.Dapatkan harga promo Nabila Shop Barang yang Kami Tawarkan Semuanya Barang ASLI ORGINAL Ada Garansi Resmi Distributor dan Garansi TAM 2 bebas resiko bebas penipuan.
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS 085-757-299-675 ATAU KLIK WEBSET RESMI KAMI http://nabilashop77.blogspot.com
    Ready Stock! Samsung Galaxy S4 Mini Rp.2,500.000
    Ready Stock! Apple iPhone 5 Rp.2,700.000
    Ready Stock! BlackBerry 9380 Orlando - Black.Rp.900.000,-
    Ready Stock! BlackBerry Curve 8520 Gemini.Rp.500.000,-
    Ready Stock! BlackBerry Bold 9780 Onyx 2.Rp.800.000,-
    Ready Stock! Blackberry Curve 9320.Rp.700.000,-
    Ready Stock! Samsung Galaxy Note 10.1.Rp.2,500.000.
    Ready Stock! Samsung Galaxy Tab 2 (7.0).Rp. 1.000.000
    Ready Stock! Samsung Galaxy S III Mini.Rp.1.800.000.
    Ready Stock! Samsung Galaxy Nexus I9250 - Titanium Si.Rp.1.500.000,-
    Ready Stock! Samsung Galaxy Note N7100.Rp.2.500.000.
    Ready Stock! Samsung Galaxy Note N7000 - Pink.Rp.1.700.000.
    Ready Stock! Samsung Galaxy Y S5360 GSM - Pure White.Rp.500.000
    Ready Stock ! BlackBerry Curve 9360 Apollo Rp.950.000,-

    BalasHapus

Related Posts Plugin for WordPress, Blogger...