Add Follow By Email Widget Like Wordpress in Blogger

The Follow by Email Pop Out Widget helps your subscribers get the latest notifications emailed to their ids.
Earlier their was a follow widget that can be used to have followers shown on your site but that does not send any email notifications of your latest post to the subscribers.
The Subscribers are the major source of traffic.Without the subscribers you can not get the  as much traffic as the subscribers give you.Many bloggers search for "How to Increase Their Subscribers" in the early stage of their blogging.This widget is made for those.
The wordpress.com provide a default Email- Subscription Widget which pop-out when you click on the Follow Option.This new widget will attract many visitors and will determinately increase your site subscribers.This new pop-up widget for email subscription can be added to blogger with some CSS and Jquery Plugin.

Steps To Add Follow By Email Widget

The process is divided into two parts:-

• Adding The J Query Plugin
  

Add the Below Code Just Before </Head> Tag (Please Neglect This step if You have Already Done That)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

• Adding A HTML/Javascript Widgets

1. Click on Layout Option in Blogger
2. Click On Add Widget
3. Choose Html/Javascript 
4. Paste The Below Code And Press Save

 <style type="text/css">
/*<![CDATA[*/
 #w2bfollowSubscribe {background-color: #464646;width: 220px;color: #fff;position: fixed;z-index: 999999;right: 10px;bottom: 0;}
 .followOpened {-webkit-border-radius: 2px 0 0;-moz-border-radius: 2px 0 0;border-radius: 2px 0 0;-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);}
 .w2bfollowButton {background: #464646;color: #CCC;font-size: 13px;line-height: 28px;padding: 0 10px;text-decoration: none;position: absolute;top: -28px;right: 0;display: block;-webkit-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.2);-webkit-border-radius: 2px 2px 0 0;-moz-border-radius: 2px 2px 0 0;border-radius: 2px 2px 0 0;height: 28px;}
 .w2bfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaXxoP7ZQ5XQY0hVwrcZPWoui1jWGP84DPOYw_K287bWF0sVhohUeqdhMPGDhzTPcnurTfk381omFpoJJ1DZ33YkS6L60QWe140_mYoxt56CMWO1f5cp7s-13zMngy2hXAZpLVgigr_M00/s1600/follow-w2b.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}
 .w2bfollowButton:hover,.followActive {color: #fff !important;}
 .w2bfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}
 .followactive {background-color: #333;}
 .w2bfollowForm {padding: 15px;}
 .w2bfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}
 .w2bfollowForm p {margin: 0 0 10px;}
 .w2bfollowForm .emailInput {width: 95%;padding: 2px 4px;margin: 0 auto;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 15px;border: 1px solid #444;color: #888;display: block;clear: both;}
 .w2bfollowForm form {text-align: center;}
 .w2bfollowForm .emailInput:focus {color: #000;border-color: #000;}
 .w2bfollowForm .emailSubmit {cursor:pointer;padding: 2px 20px;background: #333;background: -webkit-linear-gradient(top, #333 0%, #111 100%);background: -moz-linear-gradient(top, #333 0%, #111 100%);background: -o-linear-gradient(top, #333 0%, #111 100%);background: -ms-linear-gradient(top, #333 0%, #111 100%);background: linear-gradient(top, #333 0%, #111 100%);color: #ccc;text-shadow: 0 1px 0 #000;border: 1px solid #282828;-webkit-border-radius: 11px;-moz-border-radius: 11px;border-radius: 11px;-webkit-box-shadow: inset 0 1px 0 #444;-moz-box-shadow: inset 0 1px 0 #444;box-shadow: inset 0 1px 0 #444;text-decoration: none;-webkit-transition: all 0.25s ease-in-out;-moz-transition: all 0.25s ease-in-out;-o-transition: all 0.25s ease-in-out;-ms-transition: all 0.25s ease-in-out;transition: all 0.25s ease-in-out;margin: 1em 0 1em 0;}
 .emailSubmit:hover {background: #222;background: -webkit-linear-gradient(top, #333 0%, #222 100%);background: -moz-linear-gradient(top, #333 0%, #222 100%);background: -o-linear-gradient(top, #333 0%, #222 100%);background: -ms-linear-gradient(top, #333 0%, #222 100%);background: linear-gradient(top, #333 0%, #222 100%);color: #fff;-webkit-box-shadow: inset 0 1px 0 #4f4f4f;-moz-box-shadow: inset 0 1px 0 #4f4f4f;box-shadow: inset 0 1px 0 #4f4f4f;text-decoration: none;}
 .emailSubmit:active {background: #111;background: -webkit-linear-gradient(top, #111 0%, #222 100%);background: -moz-linear-gradient(top, #111 0%, #222 100%);background: -o-linear-gradient(top, #111 0%, #222 100%);background: -ms-linear-gradient(top, #111 0%, #222 100%);background: linear-gradient(top, #111 0%, #222 100%);color: #aaa;-webkit-box-shadow: inset 0 -1px 0 #333;-moz-box-shadow: inset 0 -1px 0 #333;box-shadow: inset 0 -1px 0 #333;text-decoration: none;}
 .w2bFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}
 .w2bFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}
 .w2bFollowFooter a:hover {color: #fff;background: none;}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
;(function(w2b){w2b(document).ready(function(){w2b.extend(w2b.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=w2b("#w2bfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);w2b(".w2bfollowButton").click(function(e){if(followBox.hasClass("followOpened")){w2b(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{w2b(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);
/*]]>*/
</script>
<div id="w2bfollowSubscribe" style="display:none;">
 <div class="w2bfollowForm">
  <a class="w2bfollowButton" href="#" title="Follow"><span>Follow</span></a>
  <h3>Follow \"Arganoid\"</h3>

  <p>Subscribe To Us And Get The Latest</p>
  <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=arganoid', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
   <input type="text" class="emailInput" name="email" placeholder="Enter Your Email..."/>
   <input type="hidden" value="arganoid" name="uri"/>
   <input type="hidden" name="loc" value="en_US"/>
   <input type="submit" value="Subscribe Us" class="emailSubmit"/>
  </form>
  <p class="w2bFollowFooter">
   <a href="http://feedburner.google.com" target="_blank">Delivered by FeedBurner</a>
  </p>
 </div>
</div>

  

Customisation:

Follow \"Arganoid\" - Change this according to your choice.  Subscribe To Us And Get The Latest -Change this text according To what you want to show as addition lines in widget arganoid- Instead of this add your Feed Burner Username. Subscribe Us - this will change the text of the submit button