Page Peels Effect or effects pages that can fold itself automatically on the corner of the page when the mouse is highlighted using a way that is often used on websites for advertising and certainly would have been a lot that know about this tutorial because this tutorial is not new anymore. How to create a page peels effects effects is quite difficult also having to use quite a lot of code.
For those interested in creating a page peels effects please follow these steps:
1. Login to Blogger.com.
2. Click Layout.
3. Click on Edit Html.
4. Tik Check "Expand Widget Templates".
5. Once again, do not forget to download the full template as a back-up data.
6. Search codes
7. Then search
#pageflip {position: relative;}#pageflip img {border: none;width: 50px; height: 52px;z-index: 99;position: absolute;right: 0; top: 0;-ms-interpolation-mode: bicubic;}#pageflip.msg_block {width: 50px; height: 50px;position: absolute;right: 0; top: 0;background: url(http://i696.photobucket.com/albums/vv322/Ad1_t/Posting/Logofeedburner.jpg) no-repeat right top;text-indent: -9999px;}
8. Further search
9. Click the Save Template button.
10. Finish is how to make it please click the link to view blog and see the results. The way the above only as examples. Do not forget to change the image url and feednya address with yours or any links that my friend had and if you want to see the demo please click here.
Hopefully useful and good luck! Article Source: http://www.o-om.com and http://www.sohtanaka.com.
For those interested in creating a page peels effects please follow these steps:
1. Login to Blogger.com.
2. Click Layout.
3. Click on Edit Html.
4. Tik Check "Expand Widget Templates".
5. Once again, do not forget to download the full template as a back-up data.
6. Search codes
<b:skin><![CDATA[ if you have found place the following code in the code:<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/><script type='text/javascript'>$(document).ready(function(){$("#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>7. Then search
]]></b:skin> and place the following code in the code:#pageflip {position: relative;}#pageflip img {border: none;width: 50px; height: 52px;z-index: 99;position: absolute;right: 0; top: 0;-ms-interpolation-mode: bicubic;}#pageflip.msg_block {width: 50px; height: 50px;position: absolute;right: 0; top: 0;background: url(http://i696.photobucket.com/albums/vv322/Ad1_t/Posting/Logofeedburner.jpg) no-repeat right top;text-indent: -9999px;}
8. Further search
<body> and place the following code under the code:<div id='pageflip'><a href='http://feeds.feedburner.com/mpthreelyricsblogspotcom' target='_blank'><img alt='' src='http://i696.photobucket.com/albums/vv322/Ad1_t/Posting/Logofeedburner.jpg'/><span class='msg_block'/></a></div>9. Click the Save Template button.
10. Finish is how to make it please click the link to view blog and see the results. The way the above only as examples. Do not forget to change the image url and feednya address with yours or any links that my friend had and if you want to see the demo please click here.
Hopefully useful and good luck! Article Source: http://www.o-om.com and http://www.sohtanaka.com.