Page Peel is a popular effect that folded page by passing mouse unfolds to show "what's behind it," like a book. There are many ways to do this, many of them use flash files making it less customizable.we will see in this post is a version of made with jQuery
Normally content that is 'behind' is an image of the subscription feed, but you can put any image and 'link' to any page of your choice. You can see an example of this Demo blog in the upper right you will see a fold, when you hover over the content that is displayed below.
How to Add Page peel effect folded Page on Blogger:
- Go To Blogger Dashboard > Design > Edit HTML > Expand Widget Templates (For New Interface Templates > Edit HTML)
- Find
Ctrl +F for the code below.
</head>
- Just above that paste the following code.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.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>
- and before ]]></b:skin> Paste the Style.
/ * Page foldable
---------------------------------------------- - * /
#pageflip {
position: relative;
right: 0;
top: 0px; /* Change 30px if you use 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(https://dl.dropbox.com/u/19945343/IM/pagina-d.png) no-repeat right top;
}
#pageflipMirror {
position: static;
right: 0;
top: 0;
float: right;
}
Finally paste before
<body> or <body expr:class='"loading" + data:blog.mobileClass'>
<div id='pageflip'>
<a href='http://blogsfunda.com/atom.xml'>
<img src='https://dl.dropbox.com/u/19945343/IM/pagina-d.png' 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 blue, you see a URL, this is the URL of the image that this case is an invitation to subscribe to the feed, you can switch to another (the same size), if desired.
- In yellow, you see where you should put the name of your blog this will be the link to your blog's feed when the user clicks the image later, but you can put any URL if you want to link to another page.
0 comments:
Post a Comment