Efek gambar Pecah dengan 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/AVvXsEij9609fKoBN8P6sUU04w1ZtaRNzJYObW9aLUBxMA9MUkXAbdVKFZjHLCcc18bZ5CHYTq8WxUC2Gi93RyxKoVV49q1_Q7c-pHrlFNcw3VpG_t3fjb8Cn8XzNtL24N3YRPAQRfMVK9yq0Zc/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/AVvXsEij9609fKoBN8P6sUU04w1ZtaRNzJYObW9aLUBxMA9MUkXAbdVKFZjHLCcc18bZ5CHYTq8WxUC2Gi93RyxKoVV49q1_Q7c-pHrlFNcw3VpG_t3fjb8Cn8XzNtL24N3YRPAQRfMVK9yq0Zc/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>
</div>
<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPSnEe6DzWCk3JFzmlaebJKTmf5EbAL4hWNhia2An79qJejSj9Xhj6u2nh9pJZYIj_toHulpwMLhLJhSMHDW_WN8boCQRjOp3HSRZqu6tu5cMBNexLpx_W50Bh2BILrWrQlGbWQocYeTU/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.