You may saw this awesome trick used by many
professional and other Websites/Blogs.This Page peel is used to Show ads ,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.Here I am going to show you how to add a page peel trick to Blogger
blog.
 |
| Add Page Peel Effect Wi |
Step 1: Add jQuery plugin (if your blog have a
jquery plugin,ignore this step)
- Copy the below code inside <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Step 2 :
- Go to Design->Edit HTML
- Copy and paste the below code above </head>
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtVkBMpaw58bs6toiDnEyOmIKg5cxqiUaeHdOpiPMwq9_ncXbQL_Yymp07SFHMirgQm0hXXHH5JzDnCWs0insyUDciver6L8fde3ymOk7r0UVQJ3M1NFxRc-wOS6VXZ0l4OI5gn799xzI/s200/rss+netoops+blog+page+peel.png)
no-repeat right top #fff;
}
</style><a
href='http://newmastifun.blogspot.com/'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1tGhkZjlYaJwTlKp_tXG23PFXR5Edh369sAgiY9PdEe2LKxggSl-qWuA0iLT7zEgUWrCp3HSFXxECPhz9SzTZPaQDkKWTh27TTYYqsDQcYFUJG65pSQ_YjopugXRgnNmG6p8-t7KuZe8/s1600/1x1juice.png'/></a><script
type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function()
{
$("#pageflip img , .back-img").stop()
.animate({
width: '307px',
height: '319px'
},
500);
} ,
function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
},
220);
$(".back-img").stop()
.animate({
width: '50px',
height: '50px'
},
200);
});
});
</script>
Step 3:
- Copy the below code inside <body> or <body ...............>
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/newmastifun.blogspot.com '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht0zmMnB9clTNZYZWHTJsQyyFeVZvJ0Jxp48IHaMtCehnb455pWWYQCHF1a9Hx3tU8kgbtmWt8FL_Vjv_DN27qLQHkl8Mjt7Da2QSi0pcgd7F2kJ0fygWN5o0S90t2LgdX0qi48aSJRvq7/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
<a href=' http://feeds.feedburner.com/newmastifun.blogspot.com '><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEht0zmMnB9clTNZYZWHTJsQyyFeVZvJ0Jxp48IHaMtCehnb455pWWYQCHF1a9Hx3tU8kgbtmWt8FL_Vjv_DN27qLQHkl8Mjt7Da2QSi0pcgd7F2kJ0fygWN5o0S90t2LgdX0qi48aSJRvq7/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
Change can the RED highlighted text with url
image url that you want,else leave it default(needn't change)
Change the BLUE highlighted text with your feed
URL or place your advertisement
- Save the Template
You are done..! If any problem persists please
do comment.
.jpg)
0 comments:
Post a Comment