Cara Membuat Page Flip Subscribe Di Pojok Atas



Cara Membuat Page Flip Subscribe Di Pojok Atas
Page Flip...? Apa lagi itu ya...?
Page Flip adalah efek membuat bagian pojok atas blog seakan-akan merupakan sebuah kertas yang tertekuk, dan akan terbuka jika di dekati  mouse.

Contohnya bisa kamu lihat pada gambar di sebelah kanan ini.

Tanpa Basa-Basi, mari kita bahas bagaimana cara pembuatannya.
Kamu langsung masuk ke Edit HTML pada Template Blogger!


 
Cari kode <b:skin><![CDATA[ pada template kamu, dan letakkan kode di bawah 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
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .msg_block&quot;).stop()
.animate({
width: &#39;307px&#39;,
height: &#39;319px&#39;
}, 500);
} , function() {
$(&quot;#pageflip img&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;52px&#39;
}, 220);
$(&quot;.msg_block&quot;).stop()
.animate({
width: &#39;50px&#39;,
height: &#39;50px&#39;
}, 200);
});
});
</script>



Lalu kamu 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(http://img222.imageshack.us/img222/9213/subscribe.png) no-repeat right top;
}



Sekarang masih dalam edit HTML template, kamu paste kode di bawah ini di atas <body>
 
<div id='pageflip'>
<img alt='' src='http://4.bp.blogspot.com/-2T2c4C857qU/UGJsCiGZTvI/AAAAAAAAANs/K_jgp3l_AtU/s1600/Cara+Membuat+Page+Flip+Subscribe+Di+Pojok+Atas.png'/>
<span class='msg_block'/>
</a>
</div>




Apa aja yang bisa di ubah...?

> Pada kode  url (http://4.bp.blogspot.com/-2T2c4C857qU/UGJsCiGZTvI/AAAAAAAAANs/K_jgp3l_AtU/s1600/Cara+Membuat+Page+Flip+Subscribe+Di+Pojok+Atas.png) bisa kamu ganti dengan gambar kamu sendiri.
> http://feeds.feedburner.com/tutor26  Bisa diganti dengan alamat lain, (terserah kamu)
terus simpan template...

Semoga bermanfaat... (",)

0 komentar:

Post a Comment

Blog Auto Approve Comments with Chapta (Blog komentar tampil setelah mengisi kode / verifikasi gambar terlebih dahulu).

Mohon menuliskan komentar Mas Mbro Bos dengan bahasa yang baik, tidak mengandung Sara, Pornografi, dan Provokasi Pihak lain.

Terima kasih atas kesediaan Mas Mbro Bos dimanapun berada (",)

Salam,

Follow by Email