STEP BY STEP GUIDE:
Step 1; Add jQuery plugin [
- Copy and Paste the following code below <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 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/AVvXsEj3V0Y2URXSgk0a_y3WvsIMo4wWAQrJM9tZuu6k-cFQ9Rk5M4Xg5WgRSqRLAqwP6aknsfVGYLrrYjjOjLzOieYr2HcE0VqmmIOkzxWfht7XtJVNA7Ov4TFxoVMxlGbCFCof2D4V78pzvUs/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/AVvXsEhjTVF4c_spo7lKWwIGb1AwGigajBA84S_ave2zgkjsujUFjQLdCtRAX5dkcJYi2qWouU_X_HZbD7FV6f7O_qNbO_Z_FOmBrFYHab2MHQrZ6n2AJldmqBO7rriJ5LSHSwxy9tnzymREkPM/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>
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/AVvXsEj3V0Y2URXSgk0a_y3WvsIMo4wWAQrJM9tZuu6k-cFQ9Rk5M4Xg5WgRSqRLAqwP6aknsfVGYLrrYjjOjLzOieYr2HcE0VqmmIOkzxWfht7XtJVNA7Ov4TFxoVMxlGbCFCof2D4V78pzvUs/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/AVvXsEhjTVF4c_spo7lKWwIGb1AwGigajBA84S_ave2zgkjsujUFjQLdCtRAX5dkcJYi2qWouU_X_HZbD7FV6f7O_qNbO_Z_FOmBrFYHab2MHQrZ6n2AJldmqBO7rriJ5LSHSwxy9tnzymREkPM/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>
<div id='pageflip'>
<a href=' http://feeds.feedburner.com/Nairaharotech'><img alt='netoops blog' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5pPX8kA1yhMQYhdlmS13KyBEgYJ0s82XxK7bH7tsFrIu7HoxFmOQBZmUNXZgR1my2UqIYI70M3VRhyphenhyphenr2oOyaRMGZX6hyphenhyphenxYidPdlYRL39cjKAq5p2buH5NxGjqMdspOD2xhgwp732hnsPQ/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/AVvXsEh5pPX8kA1yhMQYhdlmS13KyBEgYJ0s82XxK7bH7tsFrIu7HoxFmOQBZmUNXZgR1my2UqIYI70M3VRhyphenhyphenr2oOyaRMGZX6hyphenhyphenxYidPdlYRL39cjKAq5p2buH5NxGjqMdspOD2xhgwp732hnsPQ/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.
Comment and Share If you have any queries.......
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteYou can use www.dlvr.it
ReplyDelete