Page Peel Effect For Blogger
Rabu, 30 Desember 2009
1
komentar
This session I would give you tricks how to make Page Peel Effect for Blogger on the top right corner with the FeedBurner display result.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>
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>
7. Change red color script with your own URL
8. Save your template
9. See test page for your reference result
Good Luck.
