Click the link below to view demo
Step 1: Add jQuery plugin ()
- Copy the below code inside <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
Add page peel effect to blogger blog
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(http://2.bp.blogspot.com/-ozIbZSc4kLo/T1SpesMOYpI/AAAAAAAAAKM/NtX4Wf48t_o/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://netoopsblog.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/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: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(http://2.bp.blogspot.com/-ozIbZSc4kLo/T1SpesMOYpI/AAAAAAAAAKM/NtX4Wf48t_o/s200/rss+netoops+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://netoopsblog.blogspot.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/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>
- Copy the below code inside <body> or <body ...............>
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/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)<a href=' http://feeds.feedburner.com/NetOopsBlogTips '><img alt='netoops blog' src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
Change the BLUE highlighted text with your feed URL or place your advertisement
- Save the Template
:)
:(
;)
:D
:-/
:x
:P
:-*
=((
:-O
X(
:7
B-)
#:-S
:((
:))
=))
:-B
:-c
:)]
~X(
:-h
I-)
=D7
@-)
:-w
7:P
2):)
:!!
\m/
:-q
:-bd
^#(^
+(1)(1).png)
Great result after implement your tips Michigan SEO
ReplyDeleteThanks eilersmarketting..:)
ReplyDeleteits there its not peeling down.plz help...www.gadgetfiles.tk
ReplyDeletewhat's the problem??
DeleteHi Valsaraj,
ReplyDeleteSorry mate but it does not work for me. I'm using IE9 and have followed your instrctions to the T. However, all I see is the page_flip.png image on the left of the screen surrounded by a blue border. Can you point me in the right direction?
Please wait for next replay I'll replay soon,
DeleteThe best answer is please use Mozilla .Mozilla is the better browser ever and it is free for download..
wow works fine to my blog...thanks valsaraj.
ReplyDeletenow try this Adding Ads Box with cool CSS effect as used in Spice Up Your Blog
Nice thx For Sharing
ReplyDeleteBest Of 2012 Templates Or More
My Premium Lab(Top 3 2012 Template For Blogger's Blog)