Latest Movie :

How to Add Page Peel effect with jQuery & CSS to Blogger


page peel for 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.



Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)
  • 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/AVvXsEi6kSR39I-YXdOrMwMBJ_SmXhIChzd7DjZmvxYYHYhxroX8DcdFz4HhdGdQ4_QtPPccdOASajBsfXMIQPDSmdhGopthOPLdzkEzZdR28Shhsou9Qe3T2xED3iPBP_ZiKQ3vChunT-uO5E4/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/AVvXsEhE3sLT9w4OUh9JplzdR_EbwsKTM07lXtGQ-vIdzuGX_wTYbeU4O9E0K_wwEMRk1aZRPsanAVQ_t5J_zGlm4kubW9_XSy5gIVXWEzU467NcQOmddUblpqQ2X3515nLY29wimdSj6FeLjjk/s1600/1x1juice.png'/></a><script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$(&quot;#pageflip&quot;).hover(function() {
$(&quot;#pageflip img , .back-img&quot;).stop()
    .animate({
    width: &#39;307px&#39;,
    height: &#39;319px&#39;
    }, 500);
    } , function() {
    $(&quot;#pageflip img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;52px&#39;
    }, 220);
$(&quot;.back-img&quot;).stop()
    .animate({
    width: &#39;50px&#39;,
    height: &#39;50px&#39;
    }, 200);
});
});
</script>
Step 3:
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTDy144cj_HXtRomnOcAL-MW0gCicNhS3nQLHbL02B8IaVLuGknf64bk_njJ18CirdokqndU3nJoJ1sR6GLR9s3nJnFHCKAibs2etCuig11Wou1Jxzf27BrjhBZ__czo4SujXUNk-g5KSp/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 
You are done..! If any problem persists please do comment.
a lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users. 
Share this article :

Post a Comment

PLEASE DON'T PLACE BULK MESSAGE , FOR ADVERTISING!

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Blogging Trainings - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger