Page Peel Effect is a nice blogger widget used by professional Bloggers. The Page Peel Widget is used to Display Ads, Page Peel has a tendency of catching the attention of Blog visitors on your blog and they will be made to click on your ad & your earnings may increase. Also, this widget can be used to boost your Blog/Web Subscribers. So, Let's Get To The Real Deal For The Day....
STEP BY STEP GUIDE:
Step 1; Add jQuery plugin [ Copy and Paste the following code below <head>
<scriptsrc='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 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/AVvXsEjdMNhxYsXi7Zs69APb7sTjhVtPsfUCO2tffOgdLxlT_vv99lSZ-yAEmdtXAUp8GgzV8a_qUD7nk3aedawx3rrr0fY9bdqdyPEaR5NB9jqTxq9nf1dq0VEwcG-NesKhYu2lHbPmCbPq-hE/s1600/rss+nairotech.blogspot.com+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://nairotech.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiNXXn8SA5NpasE5ewk9Cws6W1Hra207GAvyrsHPAV2SWArGuHLcXEQpbTQxNUJDQbBPj27Qe0XtlORakVtN_iqq6yKxbhkUyIkVbkzb-viSdO5uhyAYIC7FP6_ABUbx_4LhCCC7iFW8I/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 below <body> 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/AVvXsEjdMNhxYsXi7Zs69APb7sTjhVtPsfUCO2tffOgdLxlT_vv99lSZ-yAEmdtXAUp8GgzV8a_qUD7nk3aedawx3rrr0fY9bdqdyPEaR5NB9jqTxq9nf1dq0VEwcG-NesKhYu2lHbPmCbPq-hE/s1600/rss+nairotech.blogspot.com+blog+page+peel.png) no-repeat right top #fff;
}
</style><a href='http://nairotech.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiNXXn8SA5NpasE5ewk9Cws6W1Hra207GAvyrsHPAV2SWArGuHLcXEQpbTQxNUJDQbBPj27Qe0XtlORakVtN_iqq6yKxbhkUyIkVbkzb-viSdO5uhyAYIC7FP6_ABUbx_4LhCCC7iFW8I/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>
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/Nairaharotech'><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Q9c-aNymxEQHr-5n-yEbqtNa50NWhK_z4Cgju4SQ6aPDS4a7K9X1dbejPozr61I9R6aZz_DlMkhmDlrW9O8v5k7fCGCW8iwbHiFxro9bFYbS-_kF4aNcXcHFOdx26WnnB3MOU63755jW/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
<a href=' http://feeds.feedburner.com/Nairaharotech'><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4Q9c-aNymxEQHr-5n-yEbqtNa50NWhK_z4Cgju4SQ6aPDS4a7K9X1dbejPozr61I9R6aZz_DlMkhmDlrW9O8v5k7fCGCW8iwbHiFxro9bFYbS-_kF4aNcXcHFOdx26WnnB3MOU63755jW/s1600/page_flip.png'/></a>
<div class='back-img'/>
</div>
Replace the RED highlighted text with site image url or leave it as default
Replace the BLUE highlighted text with your feed URL Or Your Ad
Then, Save the Template.
Done!
Comment and Share If you have any queries.......
0 comments:
Post a Comment