I think you are understand from this picture. So, let's go.
First login your Blogger.com Dashboard. Then select Template from desire sites Drop-down menu.
Remember: I show this tips in Blogger.com new interface. If you are using old interface login blogger.com then click Design then click Edit HTML
Now show all Blogger.com's selected templates. There are a option for Edit Template. Click on this button. Then show a page like this picture.
Now search for </head> tag. Click Ctrl + F from your Keyboard. After finding </head> paste this code before </head> tag.
Code for </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: 99; position: absolute; right: 0; top: 0; -ms-interpolation-mode: bicubic;}#pageflip .msg_block { width: 50px; height: 50px; overflow: hidden; position: absolute; right: 0; top: 0; background: url(http://2.bp.blogspot.com/_p4Te9Li52fs/So9Qb5J1yWI/AAAAAAAAAAU/8_mR7vt-tCw/subscribe.png) no-repeat right top;}</style><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>Then find <body> tag and add this code after <body> tag.
Code for <body>:
<div id='pageflip'><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqRJa0-7F9pbvh4euIwMBjqUT8QI2kz1aBFqe26_WkBSEdfzNRKFIkh01K5_wgGgI-wZKt8FlJLRZ6r0Esr3GXqK2H6YX-JtG8H2Qf16qjTvVQz1v3xHFj3HIXgvM5gdcFwwcd89nR5w96//'/></a><div class='msg_block'></div></div>Remember: Replace http://feeds.feedburner.com/techspage with your blog's feed address. Also you can change all image as your wish.
If you like my post please like our Page.
No comments:
Post a Comment