How To Make A Page Peel Effect

Now, I will share a new tricks, that is Page Peel Effect. By the way, what is Page Peel Effect? Page Peel Effect is an effect that looks like open paper. For example, you can see here. So, if you want to use this trick, you must follow the steps below.

Firstly, backup your template, because we will make many changes!

1. Log in to your blogger account
2. Go to Design --> Edit HTML
3. Check Expand Widget Templates
4. Then find this code : <b:skin><![CDATA
5. Copy the code below, and paste above <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>

6. Find another code : ]]></b:skin>
7. Copy the code below, and paste above ]]></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://i164.photobucket.com/albums/u6/CeLiNe77/facebook
_Icon250.png)
no-repeat right top;
text-indent: -9999px;
}
*The green text is the image that will appear

8. Spirit! This is the last! Find this code : <body>
9. After that, copy the code below and paste under <body>
<div id='pageflip'>
<a href='http://facebook.com' target='_blank'>
<img alt='' src='http://experiencecomfortshopping.com/media/images
/sc-page-peel.png'/>
<span class='msg_block'/>
</a>
</div>
*The red text is the website that want open
*The blue text is the image of the paper

10. Then? Finish.. You can save now

2 comments:

Post a Comment

:) :( :)) :D =))
Loading Comment Form