Buat Page Flip Di Pojok Kanan Atas Blog

Buat Page Flip Di Pojok Kanan Atas Blog : Apakah anda sudah tau page flip,mungkin para bloger yang sudah lama berkecimpung dalam dunia bloging  sudah mengetahuinya. Tapi, untuk para bloger pemula mungkin baru mengenal Page Flip untuk itu saya akan jelaskan sedikit tentang Page Flip. Page Flip adalah efek pada pojok sebuah web, seperti kertas yang tertekuk atau berlipat, dan akan terbuka jika didekati mouse, kira-kira seperti itulah Page Flip. Nah, bagi anda yang ingin mencoba diblog anda silahkan ikuti langkah-langkah berikut :

1.Login keblog anda
2. Pilih Template > Edit HTML Kemudian klik lanjutkan (untuk jaga-jaga download dulu template anda)
3. Centang kotak kecil Expand TemplateWidget 
4. Gunakan Control F dan cari kode <b:skin><![CDATA[ apabila sudah ketemu copykan kode dibawah ini tpat di atas kode <b:skin><![CDATA[

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

5. Selanjutnya cari lagi kode ini ]]></b:skin> dan letakkan kode dibawah ini tepat 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://lh3.googleusercontent.com/-LwoVbxUMKFs/TXc3SM8XcvI/AAAAAAAABb4/RuzGqYFEfIw/s1600/subscribe.png) no-repeat right top;
   }
Kode yang berwarna merah adalah alamat imagenya,anda bisa menggantinya dengan selera anda

6. Selanjutnya lakukan pencarian lagi, cari kode </body> dan letakkan kode dibawah ini juga tepat di atas kode </body>  
<div id='pageflip'>
<a href='http://bungas-barubelajar.blogspot.com/feeds/posts/default'>
<img alt='' src='https://lh3.googleusercontent.com/-Nf59CtGIBq4/TXc4EUWGIdI/AAAAAAAABb8/qE8ORM991Ik/s1600/pageflip.png'/>
<span class='msg_block'/>
</a>
</div>
Kode warna merah adalah alamat url feed, jadi anda ganti dengan alamat url feed blog anda. Biasanya terdapat pada menu RSS
7. Simpan Template anda dan langsung lihat hasilnya
--Semoga Berhasil--

3 comments:

  1. setiyo@ sebelum saya memposting artikel ini, saya sudah mencobanya terlebih dahulu. Coba anda perhatikan sciptnya dan petunjuknya. Terima Kasih sudah berkunjung

    ReplyDelete
  2. memang suatu kasus pernah terjadi karena tidak semua template sama kalau gambar ada di pojok bawah kanan coba untuk saudara @ setiyo strife ubah di bagian css nya #pageflip position: dari relative menjadi absolute pasti gambar akan berubah menjadi di pojok atas ..tanks broer share nya salam blogger...

    ReplyDelete