Membuat Page Flip di Pojok Kanan Atas

Page Flip, apa itu page flip? pasti pertanyaan ini sempat melintas di pikiran sobat. Untuk contohnya sobat bisa klik di CandaCinta. Sobat lihat gambar yang ada di pojok kanan atas, itu adalah page flip. Cukup simpel dan sederhana memang. Tapi ianya memiliki banyak fungsi.

Fungsi dari page flip ini banyak macam, bukan hanya untuk subscribe postingan blog, tapi juga bisa kita gunakan untuk banyak hal, seperti iklan atau yang lainnya. Hampir sama dengan gambar pojok. Jika sobat ingin membuat page flip ini, silahkan ikuti langkah-langkah berikut :

Cari kode <b:skin><![CDATA[ pada template sobat, kemudian copas kode berikut ini tepat di atasnya,

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>

Kemudian sobat copy lagi kode CSS di bawah ini, dan paste di atas kode ]]></b:skin>

#pageflip {
   position: relative;
   right: 0; top: 0;
   float: right;
   }

#pageflip img {
   width: 50px;
   height: 52px;
   z-index: 99;
   position: absolute;
   right: 0;
   top: 0;
   -ms-interpolation-mode: bicubic;
   }

#pageflip .msg_block {
   width: 50px;
   height: 50px;
   overflow: hidden;
   position: absolute;
   right: 0;
   top: 0;
   background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjamL6qQgjfThO53QE86y2GDB8ENP9Q_fOhrqnZ3Brynev4WEF1VsGfQhr-s_Ei-ln2H6kIT099IdZ2vaqIqxaEbKOL8v_AMlPVxsG4Uze8ywwJPZsn5OR_CY7t3ol35XMHwVWzDBn3I28/s1600/subscribe.png) no-repeat right top;
   }

Sobat bisa menggati kode yang berwarna merah dengan kode gambar yang sobat inginkan.

Sekarang masih dalam suasana edit HTML template, sobat paste kode di bawah ini tepat di atas kode <body>

<div id='pageflip'>
<a href='http://candacinta.blogspot.com/feeds/posts/default'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnY-fcnFvGhj2QwBbMjqvGXsZoDUcNMSBV51lspUAysKc_KSOjpqIedVZK9z-54v9f2yhf5nYLDSn2EVeHWsXfjZwt-xmVnVjy6fY8kMYtDe0J0La5tvKkaVQVi4sNbgu5F0Xdlp1mXo/s1600/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Sobat ganti kode feeds di atas dengan kode feeds blog sobat, kemudian simpan template sobat.

2 Komentar "Membuat Page Flip di Pojok Kanan Atas", Baca atau Masukkan Komentar

Muhammad Asri said...: (>>>Mhd Asri<<<)mokasi bg,,
akhirnyo ketemu jugo caro buat macam ne,,
lamo nak cari dh,,,
hahaaay,,,,; March 17, 2011 at 5:07 PM
Anonymous said...: wehh keren tuh bsa di coba .hehe; October 10, 2012 at 1:13 PM

Membuat Page Flip di Pojok Kanan Atas

Artikel terkait :

2 Komentar "Membuat Page Flip di Pojok Kanan Atas", Baca atau Masukkan Komentar

Followers