0
Tags:
Blogger,
plugins
How to add peel effect for blogger blogs and wordpress with subscribe button!!!!
Hello
This is an awesome effect which is a must for beginners, to increase their subscribers.
Take a quick demo here (blogger)
Take a quick demo here(wordpress)
I was surfing the internet for a long time for this.
Here are some screen shots of the following plugin:
Normal
When hovered.
First of all I would like to thank Lasantha for this tut in bloggertricks.net
Here is the tutorial for wordpress (easy than blogger)
Just add the following plugin :http://wordpress.org/extend/plugins/jquery-page-peel/
That's all for wordpress!!!.
For blogger do the following.
Login to blogger.
Click design then edit html and check expand widget templates.
Then find ]]></b:skin>
Before it add the following code
This is an awesome effect which is a must for beginners, to increase their subscribers.
Take a quick demo here (blogger)
Take a quick demo here(wordpress)
I was surfing the internet for a long time for this.
Here are some screen shots of the following plugin:
Normal
When hovered.
First of all I would like to thank Lasantha for this tut in bloggertricks.net
Here is the tutorial for wordpress (easy than blogger)
Just add the following plugin :http://wordpress.org/extend/plugins/jquery-page-peel/
That's all for wordpress!!!.
For blogger do the following.
Login to blogger.
Click design then edit html and check expand widget templates.
Then find ]]></b:skin>
Before it add the following code
#pageflip {position: relative;}#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;position: absolute;z-index: 50;right: 0; top: 0;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidNNbC8Q44f_crWGlQwgsQTd0ZXowR-jkVPJp4ujPPEGZq1mGCUD8VAIXlHbOMvXsfTcmGAUtqCOizuURhASRPExhS9HcnVPQKr0Eualat9IqorWV3erurFu3LMxr7WtuYE36BCsOKo1EM/) no-repeat right top;text-indent: -9999px;}Note : Please host 'subscribe.png' image yourself.
5.Scroll down to where you see </head> tag:
6.Copy below code and paste it just before the </head> tag.
<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.Scroll down to where you see <body> tag:
7.Copy below code and paste it just after the <body> tag.
<div id='pageflip'><a href='http://feeds2.feedburner.com/baratworld'> <img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0DJuSZb3Bso3V-UAL-XJYjYaqeivqSo1V4N49zNbbZsdTZnA6f0q8nzQa0ft2CvF-o_Wym4dy1xrbhlWywsIqPwYnU7pPDuSb488wQg8tZ9J2jeC8AiD4q5WkwNWRE8H7RxnhZxGGIQNp/'/> <span class='msg_block'>Subscribe via RSS</span></a></div>
Note : Please host 'page_flip.png' image yourself.
Replace 'http://feeds2.feedburner.com/baratworld' with your feed address.
I repeat again this is not my effort and all the credit goes to Lasantha.
But please drop your comments if you have any doubts.
Thanks for watching
Subscribe To Get FREE Tutorials!
Tags:
Blogger,
plugins
Subscribe to:
Post Comments (Atom)
Share your views...
0 Respones to "How to add peel effect for blogger blogs and wordpress with subscribe button!!!!"
Post a Comment