Selasa, 29 Desember 2009

Page Peel Effect For Blogger

The Bells of Tomorrow (peel Through the Cities of Today)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.
Please, following this instructions:


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 $(&quot;#pageflip&quot;).hover(function() { $(&quot;#pageflip img , .msg_block&quot;).stop() .animate({ width: &#39;307px&#39;, height: &#39;319px&#39; }, 500); } , function() { $(&quot;#pageflip img&quot;).stop() .animate({ width: &#39;50px&#39;, height: &#39;52px&#39; }, 220); $(&quot;.msg_block&quot;).stop() .animate({ width: &#39;50px&#39;, height: &#39;50px&#39; }, 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.

Tidak ada komentar:

Poskan Komentar