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 l...
https://iskablogs.blogspot.com/2011/01/how-to-make-page-peel-effect.html
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
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>
_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>
8. Spirit! This is the last! Find this code : <body>
9. After that, copy the code below and paste under <body>
*The blue text is the image of the paper
10. Then? Finish.. You can save now
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 appearposition: 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;
}
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<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 blue text is the image of the paper
10. Then? Finish.. You can save now