Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect

Ada lagi nih tips untuk memperunik atau mempercantik halaman web/blog kamu, tips ini aku dapatkan dari blog seseorang pada saat browsing kemarin. Nama tips nya membuat halaman yang bisa ngelipat pada saat mouse kamu berada di pojok halaman, halaman ini bisa ngelipat dan kebuka. Namun hanya sebagian kecil saja dan di dalamnya terdapat gambar (disesuaikan) yang biasanya kalau diklik akan diarahkan ke suatu halaman lain seperti halaman RSS blog ataupun bisa berupa halaman lainnya.

Mau tau gimana sih bentuk nya, ini loh bentuk nya

Untuk membuat halaman blog teman-teman seperti di atas caranya gampang. Ikuti langkah-langkah berikut:

1. Login ke blogger >> Tata Letak >> Edit HTML >> Centang Expand widget template

2. Klik CTRL + F untuk mencari kode berikut <b:skin><![CDATA[
dan lalu copy kode berikut di atasnya:

<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>

3. Lalu cari lagi kode ]]></b:skin>
Dan letakkan kode berikut tepat di atasnya:

#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/AVvXsEiArr3HB-lcTnOC51bs4_3fWo8on9rB1Lz59G8us3oyyNcMJ0qpiPbBpgWbSHb2IBUCACAIGXWoChYzre9Bln9hdEKXFapbYR0FgLmbNV_bh5sB9DGByhX2v7w_En2XsxfILpNBGWlEipPR/) no-repeat right top;
text-indent: -9999px;
}

4. Cari kode <body>
Dan lettakkan kode berikut di bawahnya:

<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/AVvXsEjxF94oboJMKfvrhVrIvy0q_pKyhEsAgVnkqsFp_EObQJxa7bDAvsDtrhKY1TuACU5_RGHgnJyrD06RyDhYQ94pjFnU4yd4XRa3LaRW5uFnK2DfNDNmuyx_GS-P0r72ofiQLDCtl2hNvhgS/'/>
<span class='msg_block'/>
</a>
</div>

*Ganti yang berwarna Ijo dengan Link yang anda inginkan. Saran: Link RSS atau link berlangganan.

5. Simpan template

Sekarang silahkan lihat blog kamu, bagaimana hasil nya? Bagus kan?

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/AVvXsEiArr3HB-lcTnOC51bs4_3fWo8on9rB1Lz59G8us3oyyNcMJ0qpiPbBpgWbSHb2IBUCACAIGXWoChYzre9Bln9hdEKXFapbYR0FgLmbNV_bh5sB9DGByhX2v7w_En2XsxfILpNBGWlEipPR/) no-repeat right top;
text-indent: -9999px;
}

Semoga bermanfaat ^_^

Sumber : http://t4belajarblogger.blogspot.com

Share 'Cara membuat Halaman yang Bisa Ngelipat/ Page Peel Effect' On ...