Page Tegument Resultant Using Jquery
Page Peel is a pop page flip final result that when your cursor is passing over it, volition demonstrate "what's behind" every bit if it would last a book. There are many ways to exercise this, many of them job flash files which makes it less customizable, however, the ane that nosotros volition run across inward this post is made amongst jQuery.
Usually, the content that is "behind", is an icon for subscribing to feed, but yous tin forcefulness out set whatever icon in addition to link to whatever page.
Demo
You tin forcefulness out run across an illustration inward this demo blog.
1. Log inward to your Blogger dashsboard, pick out your weblog > thence instruct to Template > Edit HTML
2. Click anywhere within the code expanse in addition to search for the below tag past times pressing the CTRL + F keys:
- You involve to supersede the url inward cherry-red amongst the address of your blog, that volition last the link to the blog's feed when the user clicks on the icon behind, but yous tin forcefulness out set whatever URL inward instance yous desire to link to simply about other page.
6. And that's it. To relieve the changes, click the Save template button.
Remember that this Page Peel final result uses jQuery, thence yous should solely accept ane version of it, in addition to if yous job Scriptaculous or Mootools, yous should apply simply about changes.
Usually, the content that is "behind", is an icon for subscribing to feed, but yous tin forcefulness out set whatever icon in addition to link to whatever page.
You tin forcefulness out run across an illustration inward this demo blog.
How to Add the Page Curl Effect on Blogger
1. Log inward to your Blogger dashsboard, pick out your weblog > thence instruct to Template > Edit HTML
2. Click anywhere within the code expanse in addition to search for the below tag past times pressing the CTRL + F keys:
</head>3. Just earlier </head> re-create in addition to glue this script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>4. Then earlier ]]></b:skin> (CTRL + F to notice it - if necessary, click on the left arrow) glue these styles:
<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>
/* Page Flip5. Finally, glue after <body> tag or if yous can't notice it, after this code:
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if yous 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;
}
<body expr:class='"loading" + data:blog.mobileClass'>The next code:
<div id='pageflip'>- In bluish yous volition run across a URL - this is the URL of the icon that, inward this case, is an invitation to subscribe to the feed. You tin forcefulness out modify it afterward to simply about other (should last of the same size).
<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>
- You involve to supersede the url inward cherry-red amongst the address of your blog, that volition last the link to the blog's feed when the user clicks on the icon behind, but yous tin forcefulness out set whatever URL inward instance yous desire to link to simply about other page.
6. And that's it. To relieve the changes, click the Save template button.
Remember that this Page Peel final result uses jQuery, thence yous should solely accept ane version of it, in addition to if yous job Scriptaculous or Mootools, yous should apply simply about changes.
