Wednesday, January 18, 2012

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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9huGbYUpd4w_gjECbwskw7oRqp8Akz3x8MU1Zg07jSO7YAS62zxUA8_g003ujgETdTOzGGzG7ou7oh1tVHvOV-z4xmwR5f3a6AAz2AVvA-qiSvUE5oVboh9UwSQ2ZbeWshHSiOGk4lcg/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 (https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9huGbYUpd4w_gjECbwskw7oRqp8Akz3x8MU1Zg07jSO7YAS62zxUA8_g003ujgETdTOzGGzG7ou7oh1tVHvOV-z4xmwR5f3a6AAz2AVvA-qiSvUE5oVboh9UwSQ2ZbeWshHSiOGk4lcg/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... (",)

No comments:

Post a Comment