How to Create A Page Peel Effect?

Hi bro, i feel all of you have knwn what the function of page peel effct. with page peel effect We can decorate our blog, you can see it in my blog too... look at top right side in this blog, yas you r right it seemly like following preview



too create it we just need for simple steps

login to your blogger account >> clck Layout option >> click Edit HTML and than put following code before/above tag <b:skin><![CDATA[


<script src='http://sites.google.com/site/software2iqbalinc/javascript/script_ditunjuk_ngelipet_t4belajarblogger.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#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>




n than put following code before/above tag ]]></b:skin>

#pageflip {
position: relative;
}
#pageflip img {
border: none;
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
position: absolute;
right: 0; top: 0;
background: url(http://software2iqbal.files.wordpress.com/2009/11/berlangganan_kelipat.png) no-repeat right top;
text-indent: -9999px;
}




n then the last step...put following code after tag <body>


<div id='pageflip'>
<a href='http://feeds.feedburner.com/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan' target='_blank'>
<img alt='' src='http://software2iqbal.files.wordpress.com/2009/11/gambar_kelipat.png'/>
<span class='msg_block'/>
</a>
</div>




FINISH...now you can view your blog changes, how easy n simple bro...


u can replace my FeedBurner Link with your Own URL, what URL can i put? Up to you, but i suggest to you to replace it with your Feed URL like Rss or Atom, this just my advice...yahaaa GoOd LuCk

Source: Sohtanaka.com

Tags: Create page peel effect for Blogger, page peel effect for your blog, how to create page peel effect, page peel effect with jQuery
Terima kasih telah membaca artikel tentang How to Create A Page Peel Effect? di blog Indo Elektronika jika anda ingin menyebar luaskan artikel ini di mohon untuk mencantumkan link sebagai Sumbernya, dan bila artikel ini bermanfaat silakan bookmark halaman ini di web browser anda, dengan cara menekan Ctrl + D pada tombol keyboard anda.

Artikel terbaru :