1. Cara membuatnya : Login blogger
2. Rancangan, Edit Html, Cari kode :]]></b:skin>
3. Dan Simpan kode berikut diatasnya :
.box_container2{
position:relative; /* important */
width:420px; /* we must set a specific width of the container, so it doesn't strech when the image starts moving */
height:auto; /* important */
overflow:hidden; /* hide the content that goes out of the div */
/*just styling bellow*/
background: black;
color:white;
}
.images_holder2{
position:absolute; /* this is important, so the div is positioned on top of the text */
}
.image_div2 {
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 */
}
.left2 img{}
.right2 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 */
}
4. Simpan kode berikut diatas kode </head> :
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='http://kangdadang.googlecode.com/files/jquery.easing.1.3panning.js'></script>
<script type='text/javascript'>
$(document).ready(function() {
//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>
5. Simpan template
6. Pemanggilannya Pada Html :
<div class="box_container2">
<div class="images_holder2">
<div class="image_div2 left2">
<img class="box_image" src="Kode Gambar Di sini" style="width: 420px;" /></div>
<div class="image_div2 right2">
<img class="box_image2" src="Kode Gambar Di sini" style="width: 420px;" /></div>
</div>
<img class="box_image2" src="Kode Gambar Di sini" style="width: 420px;" /></div>
7.SeLesai Dan Lihat Hasilnya Semoga Berhasil
Langganan:
Posting Komentar (Atom)
Posting Komentar