Page Tegument Outcome Using Jquery
Saturday, March 21, 2020
Edit
Page Peel is a pop page flip trial that when your cursor is passing over it, volition demonstrate "what's behind" equally if it would live on a book. There are many ways to exercise this, many of them utilization flash files which makes it less customizable, however, the 1 that nosotros volition come across inwards this postal service is made amongst jQuery.
Usually, the content that is "behind", is an icon for subscribing to feed, but y'all tin position whatever icon as well as link to whatever page.
Demo
You tin come across an instance inwards this demo blog.
1. Log inwards to your Blogger dashsboard, guide your spider web log > thus larn to Template > Edit HTML
2. Click anywhere within the code expanse as well as search for the below tag yesteryear pressing the CTRL + F keys:
- You bespeak to supersede the url inwards scarlet amongst the address of your blog, that volition live on the link to the blog's feed when the user clicks on the icon behind, but y'all tin position whatever URL inwards instance y'all 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 trial uses jQuery, thus y'all should solely convey 1 version of it, as well as if y'all utilization Scriptaculous or Mootools, y'all should apply simply about changes.
Usually, the content that is "behind", is an icon for subscribing to feed, but y'all tin position whatever icon as well as link to whatever page.
You tin come across an instance inwards this demo blog.
How to Add the Page Curl Effect on Blogger
1. Log inwards to your Blogger dashsboard, guide your spider web log > thus larn to Template > Edit HTML
2. Click anywhere within the code expanse as well as search for the below tag yesteryear pressing the CTRL + F keys:
</head>3. Just earlier </head> re-create as well as 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 detect 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 y'all can't detect it, after this code:
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if y'all convey 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 y'all volition come across a URL - this is the URL of the icon that, inwards this case, is an invitation to subscribe to the feed. You tin alter it subsequently to simply about other (should live on 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 bespeak to supersede the url inwards scarlet amongst the address of your blog, that volition live on the link to the blog's feed when the user clicks on the icon behind, but y'all tin position whatever URL inwards instance y'all 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 trial uses jQuery, thus y'all should solely convey 1 version of it, as well as if y'all utilization Scriptaculous or Mootools, y'all should apply simply about changes.