Cara Membuat Label Bergerak dengan Jquery

Sabtu, 05 Mei 2012

Bagikan Post ini :

Kali ini saya akan menutorialkan cara agar label di blog anda lebih keren. dulu ada juga yang buat script untuk membuat label berputar pada mode cloud. namun jika begitu-begitu saja pasti akan bosan kan? nah kali ini saya akan membuat penggantinya, dan anda juga bisa lihat juga hasilnya di blog saya ini di bagian labelnya. oke, mari kita mulai...




inilah bentuknya

Nah sekarang silahkan anda masuk ke Rancangan >> Edit HTML >> centang Expand Template Widget.
atau, agar lebih amannya download dulu template anda.

    1. Setelah masuk dan Edit HTML silahkan cari kode berikut

    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

    Jika tidak ada, silahkan copy code tersebut di atas kode </head> 


        2.  Kemudian anda harus sudah mengkonfigurasi atau menambahkan widget label sebelumnya

        3. cari kode label
    tujuannya agar tahu tipe dan label yang digunakan ke berapa kali. Tapi jika anda memang memakai Template yang sudah dianjurkan oleh Blogger, maka tipe labelnya itu label1 tapi ada juga sampai label2 atau label99
    kalau sudah sampai label99 biasanya itu sudah memakai label cloud dan jika memang benar, Hapus saja label tsb dari elemen laman.


        4. jika sudah tahu tipe labelnya, masukkan kode berikut dibawah script yang pertama tadi.

    <script type='text/javascript'>
    $(document).ready(function() {
    $(&#39;#Label2 li&#39;).hover(function() { //mouse in
    $(this).animate({ marginLeft: &#39;12px&#39; }, 400);
    }, function() { //mouse out
    $(this).animate({ marginLeft: 0 }, 400);
    });
    });
    </script><!-- end LinkNudging -->

    NB. kode Label2 yang bercetak tebal diganti dengan tipe kode label yang template anda pakai. atau silahkan ganti dengan label1

    MAU COPAS? SERTAKAN SUMBERNYA

    Anda menyukai artikel diatas?, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Blog August Peter ini

    0 komentar :

    Berkomentarlah

    Beritahu kami apa yang anda pikirkan

     
    Support : Copyright © 2011. August Peter's Blog - All Rights Reserved
    Template Edited by August Peter Inspired by Sportapolis Shape5.com
    Proudly powered by Blogger