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

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/AVvXsEjACQnc2u6YK6ax9_u4i2eYoWDsvFzpalpeJewr9Krk9vBynzoDmEvF4yU9Bx28_btzai3QjKYGLU0CsDi35RuJyi_kKw05LwdKTymh2VR9FvBeWjam7ttHPS4TPsl7Zrdr10_vGP9jUVw/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/AVvXsEjACQnc2u6YK6ax9_u4i2eYoWDsvFzpalpeJewr9Krk9vBynzoDmEvF4yU9Bx28_btzai3QjKYGLU0CsDi35RuJyi_kKw05LwdKTymh2VR9FvBeWjam7ttHPS4TPsl7Zrdr10_vGP9jUVw/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>
</div>
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgm9hWNl1afL0spmVsNOr4wtQUdHhdetrSke4BYjJNWJVFuA-OQ_DqTg90lfRAqA_irGukVMeaw5cn4J9c5ev55RyAXBr2wlvsPdeJVCGZvarw82wABYVcdT5DSg6rBrmi51yFG8f6Pytc/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.