Follow and Subscribe Widget

The widget is similar to WordPress follow widget.
This is very nice widget using JQuery with smooth effects and  the widget is very easy to customize.
You will get more email subscribers with this widget and Very easy to Install in your Blog

Add this Stylish Widget in Blogger/Blogspot as follows 

 

>> Go To Layouts >> Add a Gadget >> Select HTML/JavaScript and paste the below code >> Hit Save and You are Done !

<style type="text/css">

/*<![CDATA[*/

 #esgfollowSubscribe {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);}

 .esgfollowButton {background: #464646;color: #CCC !important;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;}

 .esgfollowButton span {background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlM2dPApJlSgHjMakxO_Aehph7e1x1pjapF2_fSQBKf6dgyGB5EmroJhoalZedFmaQLaGOwgfRe7FlW9CwJo3-fNRQJbnfX31_oNOAoH_5oLx3K981IVV9uPxah_v1hKJ4YrGNHgOWZA_r/s1600/follow-esg.png") no-repeat scroll 0 3px transparent;padding-left: 15px;}

 .esgfollowButton:hover,.followActive {color: #fff !important;}

 .esgfollowButton:hover span,.followActive span {background-position: 0 -37px !important;}

 .followactive {background-color: #333;}

 .esgfollowForm {padding: 15px;}

 .esgfollowForm h3 {font-size: 18px;margin: 0 0 10px;font-weight: normal;}

 .esgfollowForm p {margin: 0 0 10px;}

 .esgfollowForm .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;}

 .esgfollowForm form {text-align: center;}

 .esgfollowForm .emailInput:focus {color: #000;border-color: #000;}

 .esgfollowForm .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;}

 .esgFollowFooter {text-align: center;font: normal 11px "Helvetica Neue", sans-serif;padding: 7px 0;margin: 0 0 -15px !important;border-top: 1px solid #3c3c3c;}

 .esgFollowFooter a {color: #aaa;text-shadow: 0 1px 0 #262626;background: none;text-decoration: none;}

 .esgFollowFooter a:hover {color: #fff;background: none;}

/*]]>*/

</style>

<script type="text/javascript">

/*<![CDATA[*/

;(function(esg){esg(document).ready(function(){esg.extend(esg.easing,{easeOutCubic:function(x,t,b,c,d){return c*((t=t/d-1)*t*t+1)+b}});var followBox=esg("#esgfollowSubscribe");var followHeight="-"+followBox.outerHeight()+"px";followBox.hide().css({bottom:"-500px"});setTimeout(function(){followBox.show().animate({bottom:followHeight})},500);esg(".esgfollowButton").click(function(e){if(followBox.hasClass("followOpened")){esg(this).removeClass("followActive");followBox.removeClass("followOpened").stop().animate({bottom:followHeight},{duration:300,easing:"easeOutCubic"})}else{esg(this).addClass("followActive");followBox.addClass("followOpened").stop().animate({bottom:"0"},{duration:500,easing:"easeOutCubic"})}e.preventDefault()})})})(jQuery);

/*]]>*/

</script>

<div id="esgfollowSubscribe" style="bottom: -971px;">

<div class="esgfollowForm">

<a class="esgfollowButton" href="#" title="Follow"><b>+ Follow</b></a>

   

<center>

<h3>Follow Web-sir</h3>

 

Get Free <span id="IL_AD8" class="IL_AD">Email Updates</span> to your Inbox

</center>

 

 

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/web-sir', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input class="emailInput" name="email" <span id="IL_AD1" class="IL_AD">placeholder</span>="Enter Your Email..." type="text">

   <input name="uri" value="e-BloggerTips" type="hidden">

   <input name="loc" value="en_US" type="hidden">

   <input class="emailSubmit" value="Subscribe" type="submit">

  </form>

<div class="esgFollowFooter"> 

   <a href="http://www.web-sir.blogspot.com/" target="_blank">Get This Widget</a>

  </div>

</div>

</div>

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

  

</script> 

------------------------------------------------------------------------------------------------------------

1. Add you Feedbuner ID in place of  >> http://feeds.feedburner.com/web-sir
2. And that's All.. Install it and Enjoy :)