Add Page Peel effect with jQuery & CSS to Blogger
You may saw this awesome trick used by many professional and other Websites/Blogs.This Page peel is used to Show ads ,this page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers.Here I am going to show you how to add a page peel trick to Blogger blog.
Click the link below to view demo
Copy the below code inside <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Add Page Peel Effect To Blogger Blog
Step 2 :
Go to Design -> Edit HTML
Copy and paste the below code above </head>
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
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 .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg99Faod_gPTwRe1IR4X2UDs_VnUXRoHjokUDEnPoowc8Btd91ploa1C7j3_UPzcQOkl0pzVfgNmUUhdB1n5eeuRq1S4wqW6ZMt2D840CSPKlPFfQmgKAQyAfLPbWp7xZUKZPkxaTbAJ6U/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjgD98aXUljZxEuE4Pfcp4NzRxI7kFCanp6rMzN8ydwMXTs11K9eBv0_BEnECMs3HYUYWIjLla5Wz7KXEGhdu3Kk7fJKuJiHO1FdtsbTLvGrz6MXXjjpAt904xudXmad8nehudV1gy40/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".back-img").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
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 .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg99Faod_gPTwRe1IR4X2UDs_VnUXRoHjokUDEnPoowc8Btd91ploa1C7j3_UPzcQOkl0pzVfgNmUUhdB1n5eeuRq1S4wqW6ZMt2D840CSPKlPFfQmgKAQyAfLPbWp7xZUKZPkxaTbAJ6U/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOjgD98aXUljZxEuE4Pfcp4NzRxI7kFCanp6rMzN8ydwMXTs11K9eBv0_BEnECMs3HYUYWIjLla5Wz7KXEGhdu3Kk7fJKuJiHO1FdtsbTLvGrz6MXXjjpAt904xudXmad8nehudV1gy40/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".back-img").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
Step 3:
Copy the below code inside <body> or <body ...............>
Copy the below code inside <body> or <body ...............>
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinr2RrehK5IElGRwkTIQ_8g9kXg35EpHsOIFHEvz4dteQdwU_8wNkIMeejnJhgugT9Y0FEQumbZJOzROppiq3p77aE7QN4Jx2nMi70i7c49ZyYSN-LVIsMoZssNRPJt2c5FuDq-3HxD_Lm/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
<a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinr2RrehK5IElGRwkTIQ_8g9kXg35EpHsOIFHEvz4dteQdwU_8wNkIMeejnJhgugT9Y0FEQumbZJOzROppiq3p77aE7QN4Jx2nMi70i7c49ZyYSN-LVIsMoZssNRPJt2c5FuDq-3HxD_Lm/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
=> Change can the RED highlighted text with url image url that you want,else leave it default(needn't change)
=> Change the BLUE highlighted text with your feed URL or place your advertisement
=> Save the Template
Add Page Peel Effect With Jquery And Css To Blogger - Softwares And Games >>>>> Download Now
ReplyDelete>>>>> Download Full
Add Page Peel Effect With Jquery And Css To Blogger - Softwares And Games >>>>> Download LINK
>>>>> Download Now
Add Page Peel Effect With Jquery And Css To Blogger - Softwares And Games >>>>> Download Full
>>>>> Download LINK pU