Last year Wordpress launched a tiny follow button which appears at right bottom of every wordpress blog.When visitors clicks the +follow button it smoothly opens and asks visitors if they want to follow the blog with latest updates directly to their inbox.They can enter their email address and will get notified whenever your blog has new post.Its just a simple Email subscription widget but very effective way to bring visitors.
If you are a Wordpress user then leave the article and visit wpnews.
For bloggers there is no such widget available except embedding the Feedburner form,to have the same widget on your blog but with Feedburner subscription follow the tutorial below.
 |
| A still from Amazingthings.in |
For demo check out the right bottom screen of this page and enter your email address and hit sign me up :-)
If you have your own web hosting then Download Files. If not and a blogger then check below..
Three files are required
1.Jquery plugin script
2.Easing jquery script
3.CSS
1.Place before closing </head> tag
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
2.Easing jquery script.Place before </head> tag
<script>
jQuery.extend(jQuery.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b;}});jQuery(document).ready(function($){var isopen=false,bitHeight=$('#bitsubscribe').height(),$bit=$('#bit');setTimeout(function(){$bit.animate({bottom:'-'+bitHeight-30+'px'},200);if(document.location.href.indexOf('blogsub=')!==-1){open();}},300);var open=function(){if(isopen)return;isopen=true;$('a.bsub',$bit).addClass('open');$('#bitsubscribe',$bit).addClass('open')
$bit.stop();$bit.animate({bottom:'0px'},{duration:400,easing:"easeOutCubic"});}
var close=function(){if(!isopen)return;isopen=false;$bit.stop();$bit.animate({bottom:'-'+bitHeight-30+'px'},200,function(){$('a.bsub',$bit).removeClass('open');$('#bitsubscribe',$bit).removeClass('open');});}
$('a.bsub',$bit).click(function(){if(!isopen)
open();else
close();});var target=$bit.has('form').length?$bit:$(document);target.keyup(function(e){if(27==e.keyCode)close();});});
</script>3.CSS.Place before </head> tag
<link rel='stylesheet' href='http://wp.com/wp-content/blog-plugins/loggedout-follow/widget.css' type='text/css' media='all' />4.Feedburner form place before </body> tag.Change the red part with your username.
<div id="bit" class="loggedout-follow-normal">
<a class="bsub" href="javascript:void(0)"><span id='bsub-text'>Follow</span></a>
<div id="bitsubscribe">
<form align="center" action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=amazingthings/wUFX', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<p>Get every new post delivered to your Inbox for FREE!.</p>
<p>Join other Amazing followers</p>
<p><input type="text" name="email" style="width: 95%; padding: 1px 2px" value="Enter your email address" onfocus='this.value=(this.value=="Enter your email address") ? "" : this.value;' onblur='this.value=(this.value=="") ? "Enter email address" : this.value;'/></p>
<input type="hidden" name="action" value="subscribe"/>
<input name='uri' type='hidden' value='amazingthings/wUFX'/>
<input name='loc' type='hidden' value='en_US'/>
<p id='bsub-subscribe-button'><input type="submit" value="Sign me up" /></p>
</form>
</div>
</div>Thats all. If you have any queries or confusion feel free to drop a comment and I will come back to you.Do tell us where have you implemented :-)
