Top two feed burner email subscription widgets for bloggers with social media button.

Getting more feed subscribers will fetch more benefits to bloggers. Email  subscribers gets updates through email. And if you are using adsense to feed, your adsense earnings also will  increase. That's why more bloggers are using feed to their blog. By adding this subscription widget to your blog, viewers get easily attracted to this and you will get more subscribers. Here top two email subscription widgets are shown, one of which is with social media button and the other one is a simple and cute subscription box. Check it out.

Subscription widget with social media button 

1#. Go to Blogger Dashboard >> Design >> Add a Gadget >> Add HTML
 paste the following HTML codes

<style>

.mbtbar{width: 100%; float: left;}
.mbtbar .count{color:#333; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial; background: #fff; 

height: 45px; line-height: 45px; vertical-align: middle; width: 100%; padding: 0 10px 0 4px;}
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; 

vertical-align: top; padding-right:3px;}
.mbtbar .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: 

Helvetica, Arial; font-size: 14px;} 
.mbtbar .subicons a{text-decoration: none; color:#333333;} 
.mbtbar .subicons a:hover{text-decoration: underline; color:#333333;}
.mbtbar .subicons .rssicon{border-right: 1px solid #e6e6e6; background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTZn6hCqoMl6prUQPpZumyT7x_B1MjC2B5tutXPhydpCY8Th8HWT3oLPPlomEVVfx5bLv5sMzyz7gjpn1iG0fhCcofQqASCZZSMaEcu4Dhy25EGIxsiwyhHTDo6HlHA8DjYkRNbag3p8U/s400/rss.png) no-repeat left center; 

min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 30px; 

margin: 0 0 0 5px;}
.mbtbar .subicons .fbicon{border-right: 1px solid #e6e6e6; background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-Rbb7fqUHAM7qwjd-qNWWvjkHdZixkPd5L4E_ef9O11CYSIBHtogavI2v5iSOhILXFEKTwQArHlSFVWAoRc4J09N5E4vq0krdxBrSuYl6bpV0201nV6sdsxxEIJbE9qSq5_wHw10Vsw4/s400/facebook.png) no-repeat left 

center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 

30px; margin: 0 0 0 5px;}
.mbtbar .subicons .twittericon{background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguXBgF2Xd0xKx5bC2yrSwNZ-4hP2x08u9KmYHUg1PUfarlne3t_trvYxEdtTp_Efj9tNpYNDdMz171Kg0joUeHLdNni8_3-_aP5G04ydFcWRhQlLMV6r5bSrZdSVdxynohAerF6zfaKT4/s400/twitter.png) no-repeat left 

center; min-width: 20px; height: 48px; line-height: 57px; vertical-align: middle; float: left; padding: 0px 20px 0px 

30px; margin: 0 0 0 5px;}
.mbtbar .emailsub{border-bottom: 1px solid #e6e6e6; padding: 15px 0 20px 0; float: left; width: 100%; font-family: 

Helvetica, Arial;}
.mbtbar .emailsub .emailicon{background: 

url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsInQVNY3kAzXqyJlj32DV2IysiPTjmyRSCFCXkFLzvF4ZIFmOCD-hnwhDDvIVv2AOZ1VG8giVY1ERSMuUqhyjlT3e-et16d2ItrDEN8kwH5TEMO0IstBgvYl5vmla1B_A5FEfDH4F5c8/s400/email.png) no-repeat left center; 

float: left; padding: 5px 15px 0px 35px; margin: 0 0 0 5px; width: 300px; height: 28px; line-height: 28px; 

vertical-align: middle; font-size: 14px; color: #333; }
.mbtbar .emailsub .emailupdatesform{margin: 15px 0 5px 5px; width: 300px; float: left;}
.mbtbar .emailsub .emailupdatesform input.emailupdatesinput{background: #fff !important; float: left; border: 1px 

solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 200px; 

-moz-border-radius: 5px; -webkit-border-radius: 5px;}
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:-moz-linear-gradient(top,#57ABFE 0%,#0080ff 

100%); background:-webkit-gradient(linear,left top,left bottom,from(#57ABFE),to(#0080ff)); border: 1px solid #0080ff; 

text-transform: uppercase; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; -moz-border-radius: 

5px; -webkit-border-radius: 5px;} 
</style>
<!--[if IE 7]> 
<style> 
.mbtbar .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 34px; 

vertical-align: middle; }
.mbtbar .emailsub .emailupdatesform input.joinemailupdates{background:#0080ff; border: 1px solid #0080ff; 

text-transform: uppercase; color: #ffffff; font-weight:bold; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; 

} 
</style> 
<![endif]-->
<div class="mbtbar"><div class="count"> <span class="bigcount">Subscribe Us</span> </div>
<div class="subicons"><div class="rssicon"><a href="http://techplusz.blogspot.com/feeds/posts/default?alt=rss" 

target="_blank">RSS</a></div><div class="fbicon"><a href="http://www.facebook.com/newworldsz" target="_blank" 

rel="nofollow">Facebook</a></div><div class="twittericon"><a href="http://twitter.com/techplusz" target="_blank" 

rel="nofollow">Twitter</a></div></div> 
<div class="emailsub"> 
<div class="emailicon">Stay Updated via Email Newsletter</div> 
<div class="emailupdatesform"> 
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" 

onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techplusz', 'popupwindow', 

'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="emailupdatesinput" name="email" 

value="Enter your email..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email...&#39;;}" 

onfocus="if (this.value == &#39;Enter your email...&#39;) {this.value = &#39;&#39;;}" type="text" /><input 

value="techplusz" name="uri" type="hidden" /><input value="Join" class="joinemailupdates" type="submit" 

/></form></div></div></div>

2#. Replace http://techplusz.blogspot.com/feeds/posts/default?alt=rss  with your feedburner feed default link 

      

      Replace facebook page link http://www.facebook.com/newworldsz with your page link 

      

      Replace feedburner  email link http://feedburner.google.com/fb/a/mailverify?uri=techplusz  with your feedburner       email link 

      

      Replace techplusz with your RSS email title. It will get from the end of your feedburner email link 

3#. Save the Gadget

Simple and Cute Email Subscription Widget 

1#. Go to Blogger Dashboard >> Design >> Add a Gadget >> Add HTML
      Paste the following HTML codes

<style> 

.mbt-email{ 
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK5sMY-BOUdJsDWpwxoqLxGcGsOJNixqOz8vI_Vs2PZMEsAaeeeOwfCwwveQIO4rqoNIyZzyU2_aal-pPAbvildWxKY7J5x_8A_tX2WxATcH_rUIXPYC_ZpXP6M_ldnKu8NRHnCKpt44IR/s1600/email.png) no-repeat 0px 12px ; 
width:300px; 
padding:10px 0 0 55px; 
float:left; 
font-size:1.4em; 
font-weight:bold; 
margin:0 0 10px 0; 
color:#686B6C; 
}
.mbt-emailsubmit{ 
background:#9B9895; 
cursor:pointer; 
color:#fff; 
border:none; 
padding:3px; 
text-shadow:0 -1px 1px rgba(0,0,0,0.25); 
-moz-border-radius:6px; 
-webkit-border-radius:6px; 
border-radius:6px; 
font:12px sans-serif; 
} 
.mbt-emailsubmit:hover{ 
background:#E98313; 
} 
.textarea{ 
padding:2px; 
margin:6px 2px 6px 2px; 
background:#f9f9f9; 
border:1px solid #ccc; 
resize:none; 
box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-moz-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); 
-webkit-box-shadow:inset 1px 1px 1px rgba(0,0,0,0.1); font-size:13px;   
width:170px; 
color:#666;}
</style>
<div class="mbt-email"> 
Subscribe via Email 
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techplusz', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"> 
<input gtbfieldid="3" class="textarea" name="email" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" value="Enter email address here" type="text" /> 
<input type="hidden" value="techplusz" name="uri"/><input type="hidden" name="loc" value="en_US"/> 
<input class="mbt-emailsubmit" value="Submit" type="submit" /> 
</form> 
</div>

2#. Replace http://techplusz.blogspot.com/feeds/posts/default?alt=rss with your feedburner feed link
   
      And also replace techplusz with your RSS email title. It will get from the end of your feedburner email link.

3#. Save the Gadget

Posted in: Widgets