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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIzFxGLiOio6XJ5JSUv5aDz9w3c3J_AJroGbfjN9ALkQzWPiA8dcQT6iQNeON_sNYkg-SBIPfQi5c980C9InLp8O0r0Q7eUUDgVnRNsM38nV8qD3vAnC1USkB0Mw7Qc-u1gyQHFJKFEN0/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyFRxN_qXUWf8T0yp99E-C2wN7MKeya2J2bnDp7LdMpxAYVgkFdmMsBY7EEQimI5lnEcBGztoljKW36iUdMVBdY00hTzd-yLfEN8-4oSyFNBSmw3l9JoG_DCuaT6YxHPQL89nVNXuTdU0/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--