Cara Membuat Page Flip Di Pojok Kanan Atas

Written By Hanif Aghar on Jumat, 08 Juni 2012 | 1:14 PM

Dah Lama Gak Mosting Tips & Trik Blogger Sibuk Ulangan hehehehe... Nah kali ini saya akan Membahas Mengenai Cara 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 Lihat Gambar di Samping. 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/AVvXsEjbbAaFctK2Zvpz6HeHqUm3V7FzIg5hvOhW5MWYq3_5H3whJN9PB8pUCbynMgbPMj6IoUu3u9K8Hu4dSm5yHy3ve1qzz9l3gOixfQD9m7SOkjeza3y0RodkU9iTqlAtJCx19t4yIiOt14Y/s1600/subscribe.png) no-repeat right top;
   }

Sobat bisa menggati kode yang berwarna Biru 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://optimus-software.blogspot.com/feeds/posts/default'>
<img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2V14yPY75rrmvW3JgC-xzciKNlNzioJAYmNCXCvwq8IQW2vPJgfJeBbzrV3ZsluluiKrYxnrhtii5so4ttm-aEvHeyT4SxKITxoI27w1iW6SnFSWYNT14pANwfQrSwcG4NWi0gMwMHJg/s1600/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>

Sobat ganti kode feeds di atas dengan kode feeds blog sobat, kemudian simpan template sobat. Tinggal Ganti saja yang saya beri Tanda Dengan Warna Biru itu dengan Alamat Blog Sobat... OK
Selamat Mencoba dan Semoga Bermanfaat, Terimakasih Sudah Berkunjung.. :D

Baca Juga yang ini Sob...:

0 komentar:

Posting Komentar

Silahkan Tulis Komentar, Kritik dan Saran Anda di Sini. Namun saya Mohon untuk tidak menggunakan komentar spam dan berkomentarlah yang sopan. Link aktif dari sumber lain yang ditulis pada kotak komentar akan saya Hapus. Terima kasih..

 
berita unik