Teman-teman juga bisa menemukannya di blog ini. Yang seperti ini lho...
UPDATE....
Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah2 berikut:
1. Login ke blogger >> Tata Letak >> Edit HTML >> Expand widget template
2. Cari kode
<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>
<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>
3. Lalu cari lagi 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtLbR08G2m35LhJTFqSdYRKt-YVnNW7AYB_Tr0Duj1G_1jnFgaFB2ogfNmdctV-18Tqxg5OB6bc6S8DgX6ZHaLLixqHGhzZZsTwCygtu2YoJP5fHbLHO_psXOmjzK6TGPQRhr7Eydl8h6/) no-repeat right top;
text-indent: -9999px;
}
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/AVvXsEgxtLbR08G2m35LhJTFqSdYRKt-YVnNW7AYB_Tr0Duj1G_1jnFgaFB2ogfNmdctV-18Tqxg5OB6bc6S8DgX6ZHaLLixqHGhzZZsTwCygtu2YoJP5fHbLHO_psXOmjzK6TGPQRhr7Eydl8h6/) no-repeat right top;
text-indent: -9999px;
}
4. Cari kode
<body> |
<div id='pageflip'>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1a3XB2-xgRztx_69rOkcA0MaYBOU_ppbDPZA-j7uR8UwE26DndIk5I0G0_0BePBmX8QziN7EzOFM7HAs1HguoYvMmmiSx34M7DyHX3w7pVB83BDwXrEWSAErlOdCD-pMHAWXEkvWqo9iK/'/>
<span class='msg_block'/>
</a>
</div>
<a href='http://feedburner.google.com/fb/a/mailverify?uri=tutorialbloggingdiblogger' target='_blank'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1a3XB2-xgRztx_69rOkcA0MaYBOU_ppbDPZA-j7uR8UwE26DndIk5I0G0_0BePBmX8QziN7EzOFM7HAs1HguoYvMmmiSx34M7DyHX3w7pVB83BDwXrEWSAErlOdCD-pMHAWXEkvWqo9iK/'/>
<span class='msg_block'/>
</a>
</div>
*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau
link berlangganan.
5. Simpan hasil kerjaan anda.
Sekarang silahkan lihat blog anda, bagaimana....baguskan?
Untuk mengganti gambar dinding, teman-teman bisa mengganti URL berikut:
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxtLbR08G2m35LhJTFqSdYRKt-YVnNW7AYB_Tr0Duj1G_1jnFgaFB2ogfNmdctV-18Tqxg5OB6bc6S8DgX6ZHaLLixqHGhzZZsTwCygtu2YoJP5fHbLHO_psXOmjzK6TGPQRhr7Eydl8h6/) no-repeat right top;
text-indent: -9999px;
}
Semoga Bermanfaat []
Sumber Trik:[sohtanaka.com]
Tags: cara membuat page peel effect, cara membuat halaman kelipat, membuat halaman yang melipat, cara membuat page peel effect dengan jQuery, tutorial page peel effect
Terima kasih telah membaca artikel tentang Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect di blog Indo Elektronika jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.