1. Open Blogger Draft
2. Click Layout --> Edit HTML and "Download Full Template", save to computer your template to be on guard if this experiment fails
3. Encode first script bellow to Centricle.Com, if your template non compatible with this script.
4. Copy-paste script to your template
5. Add this script below on above script : </head>
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 1500;
position: fixed;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: fixed;
right: 0; top: 0;
background: url(http://i45.tinypic.com/nn09hi.jpg) no-repeat right top;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 1500;
position: fixed;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: fixed;
right: 0; top: 0;
background: url(http://i45.tinypic.com/nn09hi.jpg) no-repeat right top;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
</script>
6. Than add this script below after script : <body>
<div id='pageflip'>
<a href='http://feeds.feedburner.com/SmartBestInfo'><img alt='' src='http://i48.tinypic.com/k06fps.jpg'/></a> <div class='msg_block'/>
</div>
<a href='http://feeds.feedburner.com/SmartBestInfo'><img alt='' src='http://i48.tinypic.com/k06fps.jpg'/></a> <div class='msg_block'/>
</div>
7. Change red color script with your own URL
8. Save your template
Good Luck.
# Back To Smart Best Info Homepage #
thanks. i did it to my blog. check it at http://www.teenscosmo.com
ReplyDelete