Efek gambar Pecah dengan jquery

Demonya bisa dilihat di blognya kang dadang 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/AVvXsEgshiAll652reyzs6znH0gEFfSVLXhsEm1B8pRlcwB6B3FOM_g3sZ9iFFy1_pTIAsLhYxjGjodbzCcwr0rpaOudns_XON7bHbhvDnWr1Jb8n2-uTRJc9qkvuXOV2sUroyJPTcIsyVhgQKU/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/AVvXsEgshiAll652reyzs6znH0gEFfSVLXhsEm1B8pRlcwB6B3FOM_g3sZ9iFFy1_pTIAsLhYxjGjodbzCcwr0rpaOudns_XON7bHbhvDnWr1Jb8n2-uTRJc9qkvuXOV2sUroyJPTcIsyVhgQKU/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>

</div>

<img class="box_image" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAbulj-xtu6U1DDf1R1LvF86SXTWQ5ZFrcYFBUmde2-xg8In4vRYa0NW4786771HhxkMcZv6dv1IOaGZ8udryCz4OmwgdmkMkTlabdAIRfTsXkwOZX2I9ofsnwVwj02RkwlozkJDhBNB8/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.

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------