Page peel effect using jQuery alphause

Helplogger Home Blog DesignWidgets SEO Menus Po ... Page peel effect using jQuery 4 comments Page Peel is a popular page flip effect that when your cursor is passing over it, will show "what's behind" as if it would be a book. 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. Usually, the content that is "behind", is an image for subscribing to feed, but you can put any image and link to any page. Demo You can see an example in this demo blog. How to Add the Page Curl Effect on Blogger 1.Log in to your Blogger dashsboard, select your blog > then go toTemplate>Edit HTML 2.Click anywhere inside the code area and search for the below tag by pressing the CTRL + F keys: 3.Just beforecopy and paste this script: 4.Then before]]>(CTRL + F to find it - if necessary, click on the left arrow) paste these styles: /* Page Flip ----------------------------------------------- */ #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; }5.Finally, paste aftertag or if you can't find it, after this code: The following code:

- 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). - You need to replace the url in red with the address of your blog, that will be the link to the blog's feed when the user clicks on the image behind, but you can put any URL in case you want to link to another page. 6.And that's it. To save the changes, click theSave templatebutton. Remember that this Page Peel effect uses jQuery, so you should only have one version of it, and if you use Scriptaculous or Mootools, you should apply some changes. Like 1 Random Posts Making a gadget visible only to the blog administrator05/09/2013 - 4 Comments How to Add a Tiny jQuery Circleslider to Blogger28/10/2013 - 3 Comments Upload images and get the URL of the image04/09/2013 - 5 Comments Related Posts: jQuery Sliding Panel with Expanding... How to add a thumbnail image/photo ... Using JQuery + EasyDrag to Move Ele... How to Add Numbered Page Navigation... Add a Custom jQuery Lightbox To Blo... 4 comments: InsaneBlogger 10/05/2013 Works like charm! Thanks. Reply Somewhere 10/08/2013 Thanks man...it really help! Reply Inderjeet Singh 10/13/2013 Thanks for this tutorial. I was looking for this a while. Keep blogging Reply Divy Singh Rathore 2/22/2014 Its really nice Effect Reply Add comment Comment as: Sign out Notify mePublishPreview Privacy Policy| Disclaimer| Terms of Service| Sitemap Back to Top DMCA PROTECTED Search Search Follow on Facebook Helplogger Like 2,785 people like Helplogger . Facebook social plugin Follow on Blogger Subscribe via Email Receive Quality Tutorials Straight in your Inbox by submitting your Email below. Submit Or subscribe via RSS Feed Recent Posts How to Add Numbered Page Navigation Widget for Blogger 5 Easy Ways to Improve the SEO of a blog & Boost Traffic What is the difference between padding and margins? Add a Custom jQuery Lightbox To Blogger How to Use Cookies in Javascript Recent Comments irsah imihar Customizing will always be easy with jquery and javascript. Even... Missy G Yay! Thank you for making this so easy! This is just what I... divakar sivashankar admin i have a problem even if i add the tag the ad is showing up... Anonymous I don't understand the instructions you have given :( Nanette Benablo your site is very helpful and easy to follow tutorials. thank you... Popular Posts Simple Recent Posts Widget for Blogger/Blogspot Create A Rollover Image Effect (change image on mouseover) Recent Comments Widget For Blogger How to remove Blogger Picture/Image Shadow and Border Hide/Show Widgets /Gadgets in Home/post /static/archive pages in Blogger 1 Like