There are many ways to do this, many of them use flash files which makes it less customizable, however, the one that we will see in this post is made with jQuery.
Regularly the content that is "behind" it is an image for subscribing to feed but you can put any image and link to any page.
You can see an example in this demo blog.
To add this page curl effect on your blog:
1. Go to Template > Edit HTML and before </head> paste the script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>2. Then before ]]></b:skin> paste 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 Flip3. Finally, paste after <body> or:
----------------------------------------------- */
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change to 30px if you have 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 right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
<body expr:class='"loading" + data:blog.mobileClass'>The following code:
<div id='pageflip'>In blue you will see a URL - this is the URL of the image that, in this case, is an invitation to subscribe to the feed. You can change it later to another (should be of the same size) if you want.
<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 red you can see where the name of your blog should be added, that will be the link to the feed of your blog when the user is giving a click on the image behind, but you can put any URL in case you want to link to another page.
And that's it. Save the template.
Remember that uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes.
0 comments:
Post a Comment