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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BCcecfaQrJoV0A5wbdxWHgQ4IRWYbK28OJtn3L3WUO76JQTWyG0RJPMwhhkYeBdlf-qW3_R-R3T9upmyVrWG4UopmHDi4eMFJjw4DUc8moS6ueysTf-Q5dHpiCGpa31ca2DHsF5Jakus/'/></div>
<div class='image_div right'><img class='box_image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_BCcecfaQrJoV0A5wbdxWHgQ4IRWYbK28OJtn3L3WUO76JQTWyG0RJPMwhhkYeBdlf-qW3_R-R3T9upmyVrWG4UopmHDi4eMFJjw4DUc8moS6ueysTf-Q5dHpiCGpa31ca2DHsF5Jakus/'/></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.
Di atas telah Saya katakan Anda harus rajin,
karena memang setiap saatnya Anda harus
memperhatikan, adakah anggota pengikut yang baru?
Nah kalau ada, masukkan namanya diurutan
yang berikutnya ..... (emang enak!) ha.......... 13x.
Selamat bersibuk ria, good luck!
27,020
0 komentar:
Posting Komentar