efeck gambar pecah dan muncul gambar ke 2 ketika cursor melintas with jquery

Demonya bisa dilihat disini 
1. Log in blogger, Rancangan, edit html,
2. cari kode ]]></b:skin> dan simpan css berikut tepat diatasnya :

.box_container{
margin-left:80px;
position:relative;
width:420px
;height:350px;
overflow:hidden;
color:white;
}
.images_holder{
position:absolute;
}
.image_div {
position:relative;
overflow:hidden;
width:50%;
float:left;
}
.kiri{
}
.kanan img{
margin-left: -100%;
}

Selanjutnya cari kode </head> dan letakkan kode berikut tepat di atas kode tadi :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){$(&#39;.box_container&#39;).hover(function(){var width = $(this).outerWidth() / 2;$(this).find(&#39;.kiri&#39;).animate({right:width},{queue:false,duration:1000});$(this).find(&#39;.kanan&#39;).animate({left:width },{queue:false,duration:1000});}, function(){$(this).find(&#39;.kiri&#39;).animate({ right : 0 },{queue:false,duration:1000});$(this).find(&#39;.kanan&#39;).animate({ left : 0 },{queue:false,duration:1000});});});
</script>

simpan template....

Cara pemanggilannya, misalkan pada Edit Html Posting :

<div class="box_container">
<div class="images_holder">
<div class="image_div kiri">
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJCQjUWbFM8ZeTxF2BfVXE8fGP4HfBoMgW7YksVw_yppe_PgW7tCXVPPIvAO_-rlAO9qgsC97mHin0ejFCMT42x5zDX56IEAOHbT0057GWLlrozG50rPyJfsrcRAJBY_0fFzsbcZ-zt0/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>
<div class="image_div kanan">
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIJCQjUWbFM8ZeTxF2BfVXE8fGP4HfBoMgW7YksVw_yppe_PgW7tCXVPPIvAO_-rlAO9qgsC97mHin0ejFCMT42x5zDX56IEAOHbT0057GWLlrozG50rPyJfsrcRAJBY_0fFzsbcZ-zt0/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>
</div>
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkz71HMoTg6hyphenhyphenT4Orwtb8zQOeBOXUFzHIE8qFax5pc7WGD2R_O4xVD3M06cbnUL8PRuHCcJHyLnmqvR-hkwiDrjtG_NrRjOMbJR06iisoqcICgYNVtVSaa0BnfRcxnw3aD8jpnzFKX1xY/s1600/full+happy.jpg" style="width: 420px;" /></div>

Simpan..........

Usahakan ukuran gambar keduanya sama, dan bila diatas kode </head> sudah ada java script jquery nya <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>; tak perlu ditambahkan lagi.