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/AVvXsEguESIf-Utl898meZJxmGABNKyWxXDRwVeCEBK87gLHrzpqRpgOg1Ou0xFvdzQu-nnHjFEI_FBJ4i1PHtrOVd5iqft3LEcxZeN1SmCgnnK1dbw9ibZ7C3_F_avziz3NsZacn3g_17jYazc/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/AVvXsEguESIf-Utl898meZJxmGABNKyWxXDRwVeCEBK87gLHrzpqRpgOg1Ou0xFvdzQu-nnHjFEI_FBJ4i1PHtrOVd5iqft3LEcxZeN1SmCgnnK1dbw9ibZ7C3_F_avziz3NsZacn3g_17jYazc/s1600/iwan+%252C+ranu.jpg" style="width: 420px;" /></div>

</div>

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



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