Don't Miss

Add Page Peel Effect with jQuery in Blogger

By Zohaib Liaqat - 6 Comments
Page Peel effect is actually a page flip effect, when you move your cursor on over it, it flip and shows that whats behind it. There are many ways for adding this effect, and today we are going to share one of them. Just like other Peel effect widgets, it would also appear at the top right corner of your blog and whenever your visitors would move their cursor over the top right corner of your website, it would display the RSS Image with its link. Check the following screenshot to see how it works.

How to Add Page Peel Effect

Step 1. Log in to your Blogger Dashboard
Step 2. Go to Template >> Edit HTML >> Search for the <head> tag
Step 3. Now Copy and Paste the following code below/after <head> tag
Note: If your blog already have jQuery plugin, then ignore this step

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step 4. Now search for </head> tag and paste the following piece of code just above/before it

<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(http://4.bp.blogspot.com/-jvgPlSWYHAQ/Uy8QI8wYvHI/AAAAAAAAErs/ycR-WrxmJJU/s1600/mini_rss.png) no-repeat right top #fff;
}
</style><a href='http://blogolect.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/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 5. Now search for <body> tag and paste the following piece of code just after the close tag '>'

<div id='pageflip'>
<a href='http://feeds.feedburner.com/blogolect'><img alt='Blogolect' src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div> 
  • Replace http://feeds.feedburner.com/blogolect with your Link
  • Replace http://4.bp.blogspot.com/-jvgPlSWYHAQ/Uy8QI8wYvHI/AAAAAAAAErs/ycR-WrxmJJU/s1600/mini_rss.png with your Image URL or keep it default
Step 6. Hit the Save Template Button
And you're done.

6 comments to ''Add Page Peel Effect with jQuery in Blogger"

ADD COMMENT
  1. It is a question how to design a good attractive webpage and for that web designer creates creative page with the help of the colorful graphics, colors and fonts.
    What all require is to hire web designer whose knowledge led to give colorful pages.

    ReplyDelete
  2. Internet is now a big part of our daily life, we use internet via smartphone, computer, laptop, tablet... to connect with people around the world, every public information database, you may interested in 192.168.l.l

    ReplyDelete