The page peel/flip effect hides the content and reveals it when mouse pointer is hovered there. This effect is present on most of the websites. Today we will learn to add this page flip effect to your blog.
Adding Page Flip Effect
1. Go to Blogger dashboard > Design > Edit HTML and add following code BEFORE </head>
<style type="text/css">
img { behavior: url(iepngfix.htc) }
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-6MBxFZ_9omNY7Sgo6XVDvkv37GwgMTq67IOmkMBWt9BAOY2Q_6MMsLuwGTI1wvJfnuBKQ3frsBsjSFZxNYycwraTYnl-Dvfp4IHOIOXFqBDTj-iyncZLnyoUdaq36fBvTFDkT55eZER/s1600/page+peel.JPG) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
img { behavior: url(iepngfix.htc) }
#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6-6MBxFZ_9omNY7Sgo6XVDvkv37GwgMTq67IOmkMBWt9BAOY2Q_6MMsLuwGTI1wvJfnuBKQ3frsBsjSFZxNYycwraTYnl-Dvfp4IHOIOXFqBDTj-iyncZLnyoUdaq36fBvTFDkT55eZER/s1600/page+peel.JPG) no-repeat right top;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#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>
2. Add following code AFTER <body>
<div id='pageflip'>
<a href='http://film-cast.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8sT3c66b-rvvkCYQruGdLbAyVNdUC427AdY3W1_o8-Avn0TaNQjTRA7umMXkLRN9bxt05cdfHmd0Klx60Af-o2OWWtiK68Z6kM_fBE2hkYvEQxbne9sjNR0EHep2YSPIyJ0-iNuVuHh0C/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
<a href='http://film-cast.blogspot.com'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8sT3c66b-rvvkCYQruGdLbAyVNdUC427AdY3W1_o8-Avn0TaNQjTRA7umMXkLRN9bxt05cdfHmd0Klx60Af-o2OWWtiK68Z6kM_fBE2hkYvEQxbne9sjNR0EHep2YSPIyJ0-iNuVuHh0C/s1600/page_flip.png'/></a>
<div class='msg_block'></div>
</div>
Finally save your template.