Add Page Peel effect with jQuery & CSS to Blogger
Have you ever seen this page peel effect on other websites and blogger. . . ? This is used to show your ads on your website or blog. This is very useful place to put your ads and increase earning.Also this page peel can be used to increase your Subscribers.In this tutorial, I will teach you how to add page peel effect to your blogger. Enjoy it and don't forget to comment and share it :)
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/AVvXsEjel_iR_8NUx32EQ9kuLm1X6b9bo4O1kgUoRAtECKrDM0JPqqLq7fJrCTB579vqHPqaJT8kgEG8p-r4NbVUEOxoWCdVgzmpM2L8QBrE2yLLOHNp4MsG2hmUji21vak1wOfPu4HaT3kUId0/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/AVvXsEjYOoJreaPiUWr6FoEYbQoBtUmKWgGei9mNWiO3c3rLQUtuPlX5iuR_ficS1O3AUYZeSVTcpyYkrl6At_-MNX-8cKCtHlcgJ2PaoJekwFf46eGDEjfWnOWD3g_K3H1XHJFhNMInLr_rGdo/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/AVvXsEjel_iR_8NUx32EQ9kuLm1X6b9bo4O1kgUoRAtECKrDM0JPqqLq7fJrCTB579vqHPqaJT8kgEG8p-r4NbVUEOxoWCdVgzmpM2L8QBrE2yLLOHNp4MsG2hmUji21vak1wOfPu4HaT3kUId0/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/AVvXsEjYOoJreaPiUWr6FoEYbQoBtUmKWgGei9mNWiO3c3rLQUtuPlX5iuR_ficS1O3AUYZeSVTcpyYkrl6At_-MNX-8cKCtHlcgJ2PaoJekwFf46eGDEjfWnOWD3g_K3H1XHJFhNMInLr_rGdo/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/itgooglepk '><img alt='itgooglepk.tk' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ZiXmKa_21wNy7XnVFVTaJ8dQ4-CNcZtDEwoOkHxQ0PoJ9XulSRtklb4QpmJp5oLlK9y_zkGtsVEYeDHO4vu6-_Ji_ZFoPGo_d4p5JuZzEvmPEamDYisb3bfE4UMpRPvMTkpaBqF2DZhS/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
<a href=' http://feeds.feedburner.com/itgooglepk '><img alt='itgooglepk.tk' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1ZiXmKa_21wNy7XnVFVTaJ8dQ4-CNcZtDEwoOkHxQ0PoJ9XulSRtklb4QpmJp5oLlK9y_zkGtsVEYeDHO4vu6-_Ji_ZFoPGo_d4p5JuZzEvmPEamDYisb3bfE4UMpRPvMTkpaBqF2DZhS/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
0 comments:
Post a Comment