Membuat Page Flip di Pojok Kanan Atas| Bl0gNya dh0nie and hErni

Page Flip, apa itu page flip? pasti pertanyaan ini sempat melintas di pikiran sobat. 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/AVvXsEg5f3Wlc5fZtnd18f3cYT6pGcZH_oMg8pW2HgarkfEVmAATR5ZPGY8g46s0e11dp-ghXrlIsDkFBaUBh6wm5-J2mjpdnE4fb-P3Nk5-z6VslxtsjimK6RBlN2axWXCY6NRx-cKg3MAp41w/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://www.blognya-dhonie.co.cc/feeds/posts/default?alt=rss'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgw_gHcDbZi7db9RFpe01zdnbD04bqt-izb7MPdXJdKFDUx6D0UPyLCjfuCsWwJ09FUn_EH8xSSXX35L8GC7u1kUzNRbHIiymHJGDFJX4JffAQm7ZUl_Nj-7FuBS50h-Jn8E2tepsU4HS4/s1600/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

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