'SELAMAT DATANG' di blog ianhacks. Semoga apa yang saya berikan bisa membuat sobat semua lebih maju dan lebih kreatif dalam segala hal..
  • Web
  • ianhacks
  • Cara Memasang Widget Pengikut Dengan Animasi


    Anda lihat atau pernah melihat widget pengikut
    yang dipasang di blog ini yang previewnya seperti
    gambar yang terlihat di atas?!

    Berbahagia sekali rasanya blog ini bisa " berbagi "
    tentang tutorialnya kepada Anda semua.

    Syarat utama untuk memasang widget pengikut
    dengan animasi ini adalah harus rajin.
    Kenapa ??? Nanti Anda akan tahu........

    Berikut adalah langkah yang harus Anda ikuti
    bila ingin mencoba membuatnya :


    1. Tambahkan Gadget pada sidebar Anda.

    2. Pilih " Pengikut "
    (lihat gambar di bawah)

    3. Biarkan tanpa judul lalu klik " SIMPAN ".
    (lihat seperti gambar di bawah)

    KETERANGAN :

    Bila step 1 s/d 3 telah ada di blog Anda,
    maka abaikan saja pada step tersebut.

    4. Tambahkan Gadget lagi tepat di atas
    Gadget Pengikut tersebut.

    5. Kali ini pilih HTML/JavaScript
    dan biarkan juga tanpa judul.

    6. Masukkan dalam kontennya, kode
    yang ada di bawah ini lalu simpan.

    <!--START THE MAIN CONTAINER-->
    <div class='box_container'>

    <div class='images_holder'>

    <!--INSERT THE SAME IMAGE IN 2 DIVS, THEY BOTH HAVE image_div CLASS AND left OR right CLASS DEPENDING ON POSITION-->
    <div class='image_div left'><img class='box_image' src='https://lh6.googleusercontent.com/-fAxjTyo0ipI/TlkCR-rh3XI/AAAAAAAAByo/juVMMqHRJjc/daftar_sahabat.gif'/></div>
    <div class='image_div right'><img class='box_image' src='https://lh6.googleusercontent.com/-fAxjTyo0ipI/TlkCR-rh3XI/AAAAAAAAByo/juVMMqHRJjc/daftar_sahabat.gif'/></div>

    <!-- WE USED CSS FLOAT PROPERY, SO WE NEED TO CLEAR NOW-->
    <div class='clear'></div>

    </div>

    <b><marquee onmouseover="this.stop()" direction="left" onmouseout="this.start()" scrollamount="10">

    (1) Nama pengikut ke-1
    (2) Nama pengikut ke-2
    (3) Nama pengikut ke-3
    (4) Nama pengikut ke-4
    (5) Nama pengikut ke-5
    (6) Nama pengikut ke-6
    (7) Nama pengikut ke-7
    (8) Nama pengikut ke-8
    (9) Nama pengikut ke-9
    (10) Nama pengikut ke-10
    dan seterusnya......

    </marquee></b><br /><br />
    <center><b><blink>Sudahkah Anda Seperti Mereka ?</blink></b></center>

    </div>

    KETERANGAN :

    Tulislah nama-nama daftar para pengikut
    yang telah mengikuti blog Anda.

    7. Lalu masuk ke Edit HTML.

    8. Carilah tag </head>

    9. Copy kode yang ada di bawah ini lalu
    letakkan sebelum tag </head> ini :

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $('.box_container').hover(function(){
    var distance = $(this).outerWidth();
    $(this).find('.box_image').animate({ left : distance },{queue:false,duration:200});
    }, function(){
    $(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:200});
    });
    });
    </script>

    <style type='text/css'>

    .box_container{
    position:relative; /* important */
    width:270px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
    height:50px; /* important */
    overflow:hidden; /* hide the content that goes out of the div */
    /*just styling bellow*/
    background: #FF0000;
    color: white;
    }
    .images_holder{
    position:absolute; /* this is important, so the div is positioned on top of the text */
    }
    .image_div {
    position:relative; /* important so we can work with the left or right indent */
    overflow:hidden; /* hide the content outside the div (this is how we will hide the part of the image) */
    width:50%; /* make it 50% of the whole images_holder */
    float:left; /* make then inline */
    }
    .right img{
    margin-left: -100%; /* 100% is in this case 50% of the image, so this is how we show the second part of the image */
    }
    .clear{
    clear:both;
    }

    </style>

    <script type='text/javascript' src='http://h1.ripway.com/syamsudin/splitting-effect.js'></script>
    <script type='text/javascript' src='http://h1.ripway.com/syamsudin/engine.js'></script>

    <script type='text/javascript'>
    $(document).ready(function() {

    //when the user hovers over the div that contains our html...
    $('.box_container').hover(function(){
    //... we get the width of the div and split it by 2 ...
    var width = $(this).outerWidth() / 2;
    /*... and using that width we move the left "part" of the image to left and right "part"
    to right by changing it's indent from left side or right side... */
    $(this).find('.left').animate({ right : width },{queue:false,duration:300});
    $(this).find('.right').animate({ left : width },{queue:false,duration:300});
    }, function(){
    //... and when he hovers out we get the images back to their's starting position using the same function... '
    $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
    $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
    //... close it and that's it
    });

    //FOR EASING EFFECT - NOT NEEDED
    $('.box_container2').hover(function(){

    var width = $(this).outerWidth() / 2;

    $(this).find('.left2').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000});
    $(this).find('.right2').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000});
    }, function(){

    $(this).find('.left2').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
    $(this).find('.right2').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});

    });

    });

    </script>

    KETERANGAN :

    Gantilah gambar animasinya dengan gambar
    milik Anda sendiri yang tentunya dengan
    menyesuaikan ukuran pada sidebar Anda.

    Atur ukuran width dan heightnya,
    sesuaikanlah dengan ukuran gambar
    dan sidebar yang Anda miliki.

    Atur juga warna background dan warna
    hurufnya dengan warna yang Anda inginkan.
    CATATAN TAMBAHAN :

    Di atas telah Saya katakan Anda harus rajin,
    karena memang setiap saatnya Anda harus
    memperhatikan, adakah anggota pengikut yang baru?


    Sumber : http://syamsudinnamaku.blogspot.com


    x_3bfae512

    Share this:

    1 comment :

    1. mantap nh gan tapi sayang nya bisa bikin loading lama tapi keren kunjungan balik serta komentar saya tunggu ya www.naufalthedarkness.blogspot.com

      ReplyDelete

     
    Copyright © Sharing Ilmu Pengetahuan | Ianhacks. Designed by OddThemes & Best Wordpress Themes 2018