.jpg)
Sometime you can see in some blogs, at the top corner when you can move cursor to that flipped page that corner flipped page animate and you can see the notes behind that.most of people understand that this effect is make by any flash content but its not true you can also put that type of effect in your blogger.com blog.In this post you can see how to add that type of animated content in your blogger.com blog.keep reading for more information.
Instruction to Install
Step 1 : Log in to your blogger.com account
Step 2 : open your blog in which you want to install this pagepeel effect
Step 3 : Go to templete> edit templete
Step 4 : Now search for </head> put this code before </head> tag
<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-repeatrighttop;}</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>Step 5 : Now put this code in Body for display pagepeel effect for that find <body> and put code below this tag.
<div id='pageflip'><a href='YOUR FEED URL'><img alt=''src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPDstNMnY-czxnG7YpKQT_eWqmvGP8n_UWMMp8svX8hg_K7t2ZUOHV8p5OqEyxV6aQh7qmjglyjYqFsjsQ4DiHiXcTfN4jQIRIF43mCai72wWRpyr-MnZnL9Y6nCGWsBd6jqhBLRIEP5ba//'/></a><divclass='msg_block'></div></div>Replace YOUR FEED URL with your original feed url and then paste that code.
If you have confusion , comment here.
0 comments:
Post a Comment