WordPress Pro Like Email Subscription Widget For Blogger

Going to give you a latest and amazing styled email subscription widget just like WordPress blogs. You can easily add this professional widget to your blogger blogs. I have published some great widgets on this blog also the nice looking email widgets. You have heard about multi colored subs widget ? and another great email box fully coded by me for WordPress, Blogger and Weebly users, you can add this email subs box to any HTML supported blogging platform. You can find a previous version of this widget in my old post. Now follow me and add this awesome styled email widget to your blog.
WordPress Pro Like Email Subscription Widget For Blogger (live demo)

WordPress Pro Like Email Subscription Widget

This is a free of cost widget for All Blog Things users and lovers. You can share this widget on your own blog by giving us full credits also a backlink. We have coded this widget very hardly so please don't make us angry like the birds. Anyway now read below for knowing the benefits of this widget.
  • Easy to add on any platform like WP, Blogger, Weebly and others.
  • Perfect and responsive coding - Auto sizing for mobile and other devices.
  • Auto font - This will automatically detect your font style and show the text awesomely.
  • It never eat your blogs loading speed, Because! this widget is coded with awesomeness.
  • You can add this email widget anywhere in your blog like footer area, sidebar area or at any other area.
  • This widget will increase your blog email subscription speed and give a pro look to your blog's template

Adding WordPress Pro Like Email Subscription Widget To Blogger Blog

Keep in mind: That you can use this widget on any blogging platform. But we are attached with Blogger therefore I show you the process for adding this widget to blogger blogs only. So! let's gets started now.

1. Go to blogger Dashboard
2. Select your Blog and go to its Layout section
3. Now click on Add a gadget button and select HTML/JavaScript
4. Copy below coding and paste it to the HTML box area
<style>
#abt-subscription-optin {margin: 0px;padding: 10px;height: auto!important;padding: 0px 10px 15px 15px !important;
text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif !important;margin: 10px;margin: 0px;padding: 10px;
margin: 8px 0 0 !important;line-height: 22px;font-family: none;padding: 5px;border: none;}#abt-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: none;
padding: 5px;border: none;}#abt-subscription-optin input.name {
background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjx121CP5H551l5iJe24wJ-NCFPpWEPlBZ9yr21eYTZF__PlmE2iP8K3R-Ed0InFb9qONsPVlV4j3g_xRtNFbtrqscwvQa4uvTOLblUy_48szW2GpUWFbfhB4vD31h_BO-KBHUxmKQ4s7hg/h120/man-name-icon.png) no-repeat center right;}
#abt-subscription-optin input[type="text"] {border: 1px solid #d9d7d7 !important;
font-size: 15px !important;margin-bottom: 10px !important;padding: 10px 30px 10px 12px !important;width: 80% !important;height: auto !important;}
#abt-subscription-optin input.email {background: white url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSziYouHmIEuJqOznKT0s8ad9YsK1GjJ_SqQYaFnlYpcYAcscPKDHoXSq181qIVv2wl0AJjjkQci_0LNkMJljQYwgh4OAKMEqKM_Y8SKhOx43gE8seoIAjLrconsko3bQmGctyFVY0FakS/h120/email-address-icon.png) no-repeat center right;}#abt-subscription-optin input {
font-family: none;border-radius: 2px;-moz-border-radius: 2px;-webkit-border-radius: 2px;box-shadow: 0 0 2px 2px #d9d7d7;-moz-box-shadow: 0 0 2px 2px #d9d7d7;-webkit-box-shadow: 0 0 2px 2px #d9d7d7;margin: 0px;padding: 0px;}#abt-subscription-optin h4 {margin-bottom: 10px !important;
font-weight: bold !important;line-height: 27px !important;letter-spacing: normal;
text-transform: none;text-decoration: none;
text-align: center !important;font-family: none;
border: none;padding: 0px !important;float: none;}input:hover[type="submit"] {
background-color: #000;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2;
color: white;cursor: pointer;none !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input {
color: #2f2f2f;font-family: 'Droid Sans', sans-serif;}#abt-subscription-optin input[type="submit"] {background: #569815; border: 1px solid #78bd35 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important;
padding: 6px 0 !important;text-shadow: -1px -1px #3A050A !important;width: 90% !important;height: auto !important;line-height: 25px !important;}
#abt-subscription-optin input[type="submit"]:hover {color: #00dd2f;}</style>
<div align="center" id="abt">
<div id="abt-subscription-optin" filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#51a8ee', endcolorstr='#003060',gradienttype=0 ); width: 266px;">
<h4 id="abt-title-text" style="color: 000000; font-size: 22px;">
Signup For Free Now!</h4>
<div id="abt-sub-title-txt" style="color: 000000; font-size: 15px;">
Join us through your Email and Let us inform you About latest Posts.</div>
<br />
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=AllBlogThings', 'popupwindow', 'scrollbars=yes,width=552,height=522');return true" target="popupwindow">
<input class="name" id="abt_Subscriber_name" name="name" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name Please" /><br />
<input class="email" id="abt_Subscriber_email" name="from" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Email (optionally) " /><br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<input name="uri" type="hidden" value="AllBlogThings" /><input name="loc" type="hidden" value="en_US" /> <input id="abt_Submit_Text" style="height: auto; padding: 6px 0;" type="submit" value="Let Me In!" /></form>
</div>
</div>
5. 70% is done. Now you have to customize this widget to be fully activated.
  • Replace AllBlogThings with your feedburner URL
  • You can also change the Bold text for giving pro touch to your widget
6. Now just click on Save button and visit your blog the widget is live :)

Final words

Now I think this widget is final email subscription widget for blogger by us. But if we got good response than we will make some other widgets. If you need any help related to this widget then please drop a comment below and I will guide you.