How to Make Paper Fold Effect In Blog, Cara Membuat Efek Lipatan Kertas Pada Blog adalah salah cara satu untuk mendesign tampilan template blog agar terlihat lebih indah dengan lipantan kertas dipojok kanan atas pada saat diarahkan mouse.
Mungkin bagi Anda yang sedang mencari tutorial untuk mendesign template blog agar terlihat lebih indah saya hanya mengsarankan lebih baik Anda mencoba mendesign template Anda dengan lipatan kertas pada blog dengan code yang akan saya sharing di bawah ini. Caranya cukup mudah, Anda tinggal memasukkan code-code yang nanti saya berikan pada tutorial di bawah ini.
1. Login pada blog
2. Pilih Edit html
3. Kemudian masukkan code berikut ini, tepat di atas code ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgflE5-pgjiysAlxdqM4xMJezLcTUTVaviHsomnUWSlwUi9j7mNao7oGNcx8HM-QcLtyYtOQqN3ODW7ID741T3rRuqj_qUzSCRUIAeKCSLwAEjHK4lZb1PfDzNucCRKJqY0GQFHdtyrQA8/s1600/Facebook-logo.png)
no-repeat right top;
text-indent: -9999px;
}
Keterangan :Silahkan ganti url gambar berwarna merah dengan url gambar yang Anda inginkan
4. Selanjutnya cari code
</head>
dan letakkan code di bawah ini tepat di atas code
</head><script type="text/javascript" src="http://yourjavascript.com/84033216211/pagepeel.js"></script>
<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>
5. Terakhir, letakkan code di bawah ini tepat di atas code
<body>
<div id='pageflip'>
<a href='http://facebook.com' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfCHPJjbSMxmp6SvJSm5GV7tcG3TEOEGFPk0al2yf_g8-oF-ZE6eM3XafXWVxTnNV-Vvc_LIXU4O66gqDjuMQCYUlGcTRX8ZDdZKbBZmtH3tVxmQw2mnZB6GEiSg84gL-EOFE3aysTEgE/s1600/page-peel.png'/>
<span class='msg_block'/>
</a>
</div>
Keterangan :Anda bisa mengganti link yang berwarna biru dengan link yang akan dituju sedangkan untuk code berwarna kuning merupakan gambar lipatan, Anda bisa menggantinya dengan gambar yang Anda iningkan.
ADS HERE !!!