1. Home
  2. Blog Design
  3. jQuery
  4. Page Cutis Upshot Using Jquery

Page Cutis Upshot Using Jquery

2:00:00 PM
Page Peel is a pop page flip lawsuit that when your cursor is passing over it, volition exhibit "what's behind" equally if it would last a book. There are many ways to practise this, many of them utilisation flash files which makes it less customizable, however, the ane that nosotros volition come across inwards this shipping service is made amongst jQuery.

Usually, the content that is "behind", is an picture for subscribing to feed, simply you lot tin set whatever picture too link to whatever page.

Page Peel is a pop page flip lawsuit that when your cursor is passing over it Page peel lawsuit using jQuery
Demo

You tin come across an illustration inwards this demo blog.

How to Add the Page Curl Effect on Blogger


1. Log inwards to your Blogger dashsboard, direct your weblog > too hence become to Template > Edit HTML


2. Click anywhere within the code expanse too search for the below tag yesteryear pressing the CTRL + F keys:
</head>
3. Just earlier </head> re-create too glue this script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

<script>
//<![CDATA[
$(document).ready(function(){
$("#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>
4. Then earlier ]]></b:skin> (CTRL + F to discovery it - if necessary, click on the left arrow) glue these styles:
/* Page Flip
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if you lot accept the navbar (navigation bar) */
float: right;
z-index:9;
}
#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(http://oi44.tinypic.com/2hheno6.jpg) no-repeat correct top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
5. Finally, glue after <body> tag or if you lot can't discovery it, after this code:
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
The next code:
<div id='pageflip'>
<a href='http://name-of_your_blog.blogspot.com/atom.xml'>
<img src='http://oi40.tinypic.com/10fqnav.jpg' style='width: 50px; height: 52px; overflow-x: hidden; overflow-y: hidden;'/></a>
<div class='msg_block' style='width: 50px; height: 50px; overflow-x: hidden; overflow-y: hidden; '/>
</div>
- In blueish you lot volition come across a URL - this is the URL of the picture that, inwards this case, is an invitation to subscribe to the feed. You tin alter it afterward to unopen to other (should last of the same size).
- You take away to supervene upon the url inwards ruddy amongst the address of your blog, that volition last the link to the blog's feed when the user clicks on the picture behind, simply you lot tin set whatever URL inwards instance you lot desire to link to unopen to other page.

6. And that's it. To relieve the changes, click the Save template button.
Remember that this Page Peel lawsuit uses jQuery, hence you lot should alone accept ane version of it, too if you lot utilisation Scriptaculous or Mootools, you lot should apply unopen to changes.

Comments

Subscribe to: Post Comments ( Atom )