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( http://3.bp.blogspot.com/-B_NFLpUiKtQ/T3civZPEEhI/AAAAAAAAAWE/guG5Pv1KUU4/s1600/rss-feeds.png ) no-repeat right top #fff;
}</style><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcVL-eL-5FpTq6sdmdmO1htMRhiOnUO7FzhyzLgGDu_sRjACvOahnFssPzHnvzA6bLUEFaX1uOOMKcxzQaMmwrTGcWYMZJr25xlEEJvxg9_FZA_zeXIwQSoyhyncc4HcDvaBdO2tnl2nY/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 ...............>
<a href='http://feeds.feedburner.com/Getseonow-ProBloggingTools '><img alt='GetSeoNow' src='http://2.bp.blogspot.com/-VhrwtsXXUoE/T3kwxemYctI/AAAAAAAAAZQ/Qw9PHXd_T2g/s1600/page_peel.gif'/></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.
You are done..! If any problem rises please leave comment.
0 comments:
Post a Comment