Apakah anda adalah seorang blogger yang sedang menawarkan space iklan di blog anda? atau anda adalah seorang penjual untuk sebuah produk di blog anda? maka cara ini mungkin dapat meningkatkan jumlah klik untuk iklan anda. Dengan memberi efek transisi seperti terkupas ini maka anda akan memberi kesan unik untuk space iklan anda. Berikut demo dan tutorialnya.
Sedangkan Demo nya bisa anda lihat disini
Adapun caranya seperti berikut :
Sedangkan Demo nya bisa anda lihat disini
Adapun caranya seperti berikut :
- Masuk ke akun blogger, lalu klik Layout - Add Gadget - HTML/Javascript
- Lalu masukkan kode berikut:
- Silahkan edit URL gambar dengan gambar yang anda inginkan. Untuk mengubah ukuran, silahkan edit angka width dan height
<style type="text/css">
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 450px;
height: 300px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 2;
clip: rect(0,650px,434px,0);
}
a.nowandthen img:nth-of-type(2){
z-index: 1;
}
a.nowandthen:hover img:nth-of-type(1){
clip: rect(0,0,434px,0);
opacity: 0;
}
</style>
<a class="nowandthen" href="http://azumacorner.blogspot.com/">
<img alt="" src="http://1.bp.blogspot.com/-5cpkCPis1x8/UbArJF1PBuI/AAAAAAAAFhM/3leauMiv55I/s1600/pasang+iklan1.jpg" />
<img alt="" src="http://4.bp.blogspot.com/-4-qBBKX6RjU/UbArHndd3kI/AAAAAAAAFhE/2qYdFWdwQbY/s1600/pasang+iklan2.jpg" />
</a>
