Saat ini saya akan membahas tentang trik cara membuat "Effect Page Peel". Effect Page Peel adalah efek yang jika kita dekatkan atau di letakan akan terbuka seperti selembar kertas.
Cara pembuatannya juga mudah, kalian hannya tinggal mengikuti langkah-langkah berikut :
(Sebaiknya kalian mem-back up terlebih dahulu template blog Anda)
Cara :
Log in dengan account blogger anda
pilih Tata Letak --> Edit HTML
lalu beri centang pada kotak "Expand Widget Template"
cari code <b:skin><![CDATA
kemudian cari kode berikut dan letakkan di atas code <b:skin><![CDATA
<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px',height: '319px'}, 500);
} , function() {
$("#pageflip img").stop()
.animate({width: '50px',height: '52px'}, 220);
$(".msg_block").stop()
.animate({width: '50px',height: '50px'}, 200);
});
});
</script>
lalu cari lagi code ]]></b:skin>
letekkan kode berikut tepat di atas kode ]]></b:skin>
#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}
Cari kode <body>
letakkan kode berikut di bawah kode <body>
<div id='pageflip'>
<a href='http://feeds.feedburner.com/rexyxaverius' target='_blank'>
<img alt='' src='http://software2iqbal.files.wordpress.com/2009/11/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>
(Ganti code yang berwarna merah dengan link yang Anda inginkan. Disarankan Link RSS atau link berlangganan)
Save Template
Untuk mengatur gambar dindingnya atau backgroundnya , kalian ubah URL berikut dengan yang anda inginkan :
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}
*kalian juga bisa mengubah lebar dan panjang nya.
Selamat Mencoba