Fast Loading Email Subscription Widget for Blogger

Email subscription helps your readers to reach your blog when you provide new article or update your blog. Moreover, an easy email subscription box attracts your readers to subscribe your blog straightforwardly. So today, this post is about adding a fast loading email subscription widget to your blog and it might be helpful

Please note: This email subscription widget adjusts the dimension automatically according to the place where it belongs to. But it’s better to have at least 300px if you’re focusing on sidebar. To prove it, if you own a demo blog, try to add this widget in your blog’s sidebar as well as footer to see its automatic dimension.

And you can easily customize your blogger sidebar width if it’s below 300px via Customise. Access path: Blogger Dashboard » Template » Customize » Adjust widths » Right sidebar.

Add this Email Subscription Box to your Blog

• Go to Blogger Dashboard » Layout
• Click on Add a Gadget
• Copy & paste the below code in it (leave the title column blank)

<style type='text/css'>#sidebar-subscribe-box { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJIMcW-rPbcNWx4nz5CTMqFlpYxlBvAmoXEnnTLaAFEDrDbAT_ghFNI4R7YwrSem-9mNGuVGK_jODddcszznorvuw4e7vLrqt1KcUYZDQ2r3DgccyypiYDE0m-MqMlzLbnwv5L4aHa-nza/s1600/colored-strip.png) repeat scroll 0 0 transparent; border: 1px solid #aaa; border-radius: 3px; padding: 3px 0;}.sidebar-subscribe-box-wrapper { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj83onV4YjHcV36dqfB83LNjCCURbbHggT2kqwGKJlDQEgd4DO6SNab8e0EbX7YizuDiWoMeW2Q_HK7BnJbuk8YBvyYVLCH-EoeNsbSGI4HNLZLU8dvc6qOTBaT2WQqrPDLIC3rIN8zeh08/s1600/bg-pattern.png) repeat scroll 0 0 #f7f7f7; color: #111; font-size: 14px; line-height: 20px; padding: 1px 20px 10px; text-align: center; text-transform: uppercase;}.sidebar-subscribe-box-form { clear: both; display: block; margin: 10px 0;}form.sidebar-subscribe-box-form { clear: both; display: block; margin: 10px 0 0; width: auto;}.sidebar-subscribe-box-email-field { -moz-border-radius: 4px; -webkit-border-radius: 4px; background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicS5DJKIR5uGOM_NH0NxS7rG9D4jMpvWYDrRbOUVB_jeSbL2oFW2wefdMpmBIOCYO0KpbqETibpN4IRAy88noIPQmbUG07jo6g4BKLt6a7UNuN6R6Md5RYSNEKeBJHB_GE6KuoCSnqZ-4-/s1600/sprites.png) no-repeat 0 -27px; border: 1px solid #ccc; border-radius: 4px; color: #444; margin: 0 0 15px; padding: 10px 40px; width: 68%;}.sidebar-subscribe-box-email-button { background: #09f; border: 1px solid #007fff; box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 1px 0 transparent; color: #fff; cursor: pointer; font-family: verdana; font-weight: 700; padding: 10px; text-shadow: 1px 1px 0 rgba(0,0,0,.4); text-transform: uppercase; width: 100%;}.sidebar-subscribe-box-email-button:hover,.sidebar-subscribe-box-email-button:focus { background: #1ca4ff;}.sidebar-subscribe-box-email-button:active { -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; box-shadow: 0 1px 4px rgba(0,0,0,0.5) inset; outline: 0;}iframe,object,embed,.yt-border iframe,.yt-border object,.yt-border embed,table { width: 100%;}embed { border-radius: 3px; -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.2); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.2); background: #FFF; border: 1px solid #ddd; box-shadow: 0 2px 4px rgba(0,0,0,0.2); margin: 0; padding: 4px 4px 4px;}#footer-section { background: #f5f5f5 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEimV3Hfd_0N8zRsckVeM2Mr7gLHGRIfAp2pZr11Z2uDwU6286x6As0sEkWuxCXiPtH7xkdpzAGt7JUlb4kccsfPnwhmVARXtJKC6kBY0fpP9NxqLqHpVPTWOGlKPFpbkpCRVWafVbFjnD7b/s0/bg-pattern.png) repeat top left; border-top: 1px solid #aaa; box-shadow: inset 0 4px 6px -3px #aaa; font-family: cambria; font-size: 14px; height: 100px; margin: 10px -30px 5px; padding: 0 30px; text-align: center; width: 100%;}</style><div id="sidebar-subscribe-box"><div class="sidebar-subscribe-box-wrapper"><p>Subscribe to our email newsletter & receive updates right in your inbox.</p><div class="sidebar-subscribe-box-form"><form action="http://feedburner.google.com/fb/a/mailverify?uri=themeshero"class="sidebar-subscribe-box-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=themeshero','popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"><input name="uri" type="hidden" value="themeshero" /><input name="loc" type="hidden" value="en_US" /><input class="sidebar-subscribe-box-email-field" name="email" autocomplete="off" placeholder="Enter your email address :)"/><input class="sidebar-subscribe-box-email-button" title="" type="submit" value="Subscribe Now!" /></form></div></div></div>

Don’t forget to replace themeshero with your FeedBurner username. Hope you added this attractive subscription widget to your blog. In case you need any more customization, feel free to mention via comment provided below

Read more

Stylish Email Subscription Widget For Blogger

Today we are going to learn “How To Add Stylish Subscription Widget / Box for Blogger”
The Widget itself is unique creation, actually it is adapted from Wordpress widgets, but you can install it on blogger for free.

Features & Whats New ?

• The Widget is made up of Pure CSS Scripts
• Easy to Install without any Internel HTML Coding
• Doesn’t Slow Down your Blog’s Loading Time.
• Its really Soft and Beautiful.
• Added Social Subscription Buttons.

How To Add This Widget To Your Blog ?

It is really easy to install on your blog, just follow the steps :
1. Go to Blogger
2. Click Layout.
3. Click Add Gadget.
4. Select HTML /Java Script.
5. Copy the Following Code and Paste in it.

<div align="center" id="bloggertipstricks"> <div id="ig-subscription-optin" filter: progid:dximagetransform.microsoft.gradientundefined startcolorstr='#55AAEE', endcolorstr='#003366',gradienttype=0 ); width: 265px;"> <h4 id="bloggertipstricks-title-text" style="color: 000; font-size: 20px;"> SUBSCRIBE OUR NEWSLETTER</h4> <div id="bloggertipstricks-sub-title-txt" style="color: 000; font-size: 14px;"> Join us for free and get valuable content delivered right through your inbox.</div> <br /> <form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.openundefined'http://feedburner.google.com/fb/a/mailverify?uri=getabacklink', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow"> <input class="name" id="bloggertipstricks_Subscriber_name" name="name" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" type="text" value="Enter Your Name" /><br /> <input class="email" id="bloggertipstricks_Subscriber_email" name="from" onblur="ifundefinedthis.value=='')this.value=this.defaultValue;" onfocus="ifundefinedthis.value==this.defaultValue)this.value='';" style="width: 130px;" type="text" value="Enter Email Address" /><br /> <div class="separator" style="clear: both; text-align: center;"> </div> <input name="uri" type="hidden" value="getabacklink" /><input name="loc" type="hidden" value="en_US" /> <input id="bloggertipstricks_Submit_Text" style="height: auto; padding: 5px 0;" type="submit" value="Get Access Today!" /></form> </div> </div> <style> #ig-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: Georgia, Times, "Times New Roman", serif;padding: 5px;border: none;}#ig-subscription-optin p {margin: 8px 0 0 !important;line-height: 22px;font-family: Georgia, Times, "Times New Roman", serif; padding: 5px;border: none;}#ig-subscription-optin input.name { background: white urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr-soj1uIk1Q1Ws1L1UaV4KY046ezkHcaZxflMO6BETF6XcIiZAZ3U6QlgAHM5hBLHOQl7USYP09-0HOrCwi6cS3gBO5jEp6NIBYVH9FE5vqPlYcjL8BJGCIoTOVFUEQB4i_505CHlq1kO/s1600/subscribe-name.png) no-repeat center right;} #ig-subscription-optin input[type="text"] {border: 1px solid #111 !important; font-size: 15px !important;margin-bottom: 10px !important;padding: 8px 28px 8px 10px !important;width: 80% !important;height: auto !important;} #ig-subscription-optin input.email {background: white urlundefinedhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifN6I4JwE3o6QYBWtgxV3ZpCky5X9teQzI44FSlj1D76vcsdx-MpWl6igdOoV6ANkG3ZFUwn7jsL57JRIYIAGZhcPFRqujQbCHYhNP2cs0KBs2neP_olcOoJjbB-uukWWtOPUnyZZrlSST/s1600/subscribe-email.png) no-repeat center right;}#ig-subscription-optin input { font-family: Georgia, Times, "Times New Roman", serif;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 2px 2px #111;-moz-box-shadow: 0 2px 2px #111;-webkit-box-shadow: 0 2px 2px #111;margin: 0px;padding: 0px;}#ig-subscription-optin h4 {margin-bottom: 8px !important; font-weight: bold !important;line-height: 26px !important;letter-spacing: normal; text-transform: none;text-decoration: none; text-align: center !important;font-family: Georgia, Times, "Times New Roman", serif; border: none;padding: 0px !important;float: none;}input:hover[type="submit"] { background-color: #0094D2;border: 1px solid #0094D2;color: red;text-decoration: none;}input[type="submit"] {background-color: #00A7ED;border: 1px solid #0094D2; color: white;cursor: pointer;font-family: 'Droid Sans', sans-serif !important;font-size: 13px;font-weight: normal;padding: 5px;text-decoration: none;}input { color: #333;font-family: 'Droid Sans', sans-serif;}#ig-subscription-optin input[type="submit"] {background: #f6640e; border: 1px solid #111 !important;color: white;cursor: pointer !important;font-size: 18px !important;font-weight: bold !important; padding: 6px 0 !important;text-shadow: -1px -1px #3A060A !important;width: 90% !important;height: auto !important;line-height: 24px !important;} #ig-subscription-optin input[type="submit"]:hover {color: #FFFC00;}</style> <div style="text-align: right;"> <span style="font-size: xx-small;"><a href="http://getabacklink.blogspot.in/2014/03/stylish-email-subscription-widget-for.html" target="_blank">get this widget</a></span></div>

6. Now before saving the widget you have to make some changes.
7. Change “getabacklink” with your blog’s feed name.
8. After changes, Hit Save. Move your widget to any desired postion where you want to place it. 

Thats it, go to your blog and check any post, you will see our widget on your blog.

Important Note : Please don’t remove our attribution link from this widget.

Why You should not remove our attribution link?

I've spent many hours customizing and developing these widgets and I think these little attribution links are worthy of my hardwork, and ofcourse it doesn't affect on your blog as its size it extra small, so kindly help Us by do not removing our attribution links from the widget you are going to install on your blog.

Read more