See the Demo Below to understand what we are going to do :)
demo
How to Use
Copy below code<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://www.wallheaven.com/subscribe.png) 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>
Now Login to Blogger>>>Go To LAYOUT>>>Then Click On Edit HTML>>>Check Mark Expand Widgets>>>Press Ctrl+F
Search For below code:-
</head>Paste the code from your clipboard directly before this line.
Now add the following code just after <body>
<div id='pageflip'> <a href='http://feeds.feedburner.com/naeemnur'><img alt='' src='http://www.wallheaven.com/page_flip.png'/></a> <div class='msg_block'></div> </div>its all Done !
1 comments:
This is great! Is there a way to cycle different graphics for the peel image? I'd like to feature clips for different friends sites.
Thanks.
Post a Comment