Sometime you can see some blogs at the top corner when you can move cursor to that flipped page that corner flipped page animate and you can see the notes behind that. Most of people understand that this effect is make by any flash content but its not true. You can also put that type of effect in your blogger. In this post you can see how to add that type of animated content in your blog. Do you heard about page peeling effect? If not then you can the screen shoot below. You can place ads, your twittericon,rss feed, your face book icon and etc. blog.
This awesome trick used by many professional and other Websites/Blogs.This page peel attract Blog visitors and they may have the tendency to click on ad and your earnings increases.Also this page peel can be used to increase your Subscribers. Without wasting the space of your page by adding page peeling effect to your blogger Here I am going to show you how to add a page peel effect on Blogger.
Table of Contents
Features:
1.) Awesome And Stylish Widget.
2.) Only One Latest J-Query Added.
3.) HTML-CSS-JavaScript-JQuery Code Used.
4.) Quick To Load And Easy To Install.
5.) Fully Customizable Code.
6.) You Can Add Anything Behind The Fold.
7.) Smooth Peeling Effect Added.
8.) Link To RSS Feed Image Pre-Added.
9.) Better To Increase Your RSS Fetcher.
10.) Attract Your Visitor To See The Behind Text/Image.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML” .
5.) Click “Ctrl+F” To Find </head> Tag.
6.) Now Copy The Below Code And Paste It Before </head>.
<!-- Awesome Corner Page Peel Effect On Hover With RSS Link Start By www.exeideas.com-->
<script src='https://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$("#exe_corner").hover(function() {
$("#exe_corner img , .exe_corner_image").stop()
.animate({
width: "307px",
height: "319px"
}, 500);
} , function() {
$("#exe_corner img").stop()
.animate({
width: "50px",
height: "52px"
}, 220);
$(".exe_corner_image").stop()
.animate({
width: "50px",
height: "50px"
}, 200);
});
});
</script>
<style type='text/css'>
#exe_corner {position: relative;right: 0; top: 0;float: right;z-index:99999;}
#exe_corner img {width: 50px; height: 52px;z-index: 99;position: absolute;right: 0; top: 0;-ms-interpolation-mode: bicubic;}
#exe_corner .exe_corner_image {width: 50px; height: 50px;overflow: hidden;position: absolute;right: 0; top: 0;background: url(https://3.bp.blogspot.com/-IfvJKcSYc8A/T5fOcTMgD7I/AAAAAAAAAKU/AcrhSGkFL80/s1600/subscribe.png) no-repeat right top;}
</style>
<!-- Awesome Corner Page Peel Effect On Hover With RSS Link End By www.exeideas.com-->
7.) Now Copy The Below Code And Paste It After </head> But Before <body> Tag.
8.) Click Save, Now You Are Done.
<!-- Awesome Corner Page Peel Effect On Hover With RSS Link Start By www.exeideas.com-->
<div id='exe_corner'>
<a href='http://feeds2.feedburner.com/EXEIdeas'><img alt='EXE-Corner-Image' title='Subscribe Our NewsLetter' src='https://4.bp.blogspot.com/-cQuWhOWI6hk/T5fObdQZf4I/AAAAAAAAAKM/cFuYjQk1yPk/s1600/page_flip.png'/></a>
<div class='exe_corner_image'/>
</div><!-- Awesome Corner Page Peel Effect On Hover With RSS Link End By www.exeideas.com-->
Customization:
1.) Just Change The Blue Text With Your RSS Link.
2.) Save And Done…
Be the first to write a comment.