BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
Inspired by Material Design

Stylish Email Subscription Widget for Blogger


Stylish Email Subscription Widget for Blogger
In Our last post I've explained “How To Add Simple CSS Subscription Widget for Blogger” on TechEthix
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 ?

1. The Widget is made up of Pure CSS Scripts
2. Easy to Install without any Internel HTML Coding
3. Doesn’t Slow Down your Blog’s Loading Time.
4. Its really Soft and Beautiful.
5. Added Social Subscription Buttons.
View of Stylish Email Subscription Widget for Blogger

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: 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="" method="post" onsubmit="window.openundefined'', '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="techethix" /><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 { background: white urlundefined 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 {background: white urlundefined 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="" target="_blank">get this widget</a></span></div>
6. Now before saving  the widget you have to make some changes.
7. Change “techethix” with your blog’s feed name. [How to Find Your Blog’s Feed Name?]
8. After changes, Hit Save. Move your widget to any desired postion where you want to place it. [ Want to add this widget just below your post body? At left or right side? Click here for tutorial ]
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.
If you want to show us some followship then you can add our Badge to your blog 

Thanks a lot for helping Us, a little help will make it to 100% happiness, kindly share this post with you friends and Don’t forget to drop your comment here [if you have any problem regarding this widget just drop your comment I’ll fix it.] 
Follow Our Blog Easily -  Click Here


  1. email subscription widget is necessary for the loyal traffic , it is also important from
    the perspective of search engine optimization.your widget is auxiliary and behaving
    correctly at we know a blog is known by the numer of its subscribers and
    loyal traffic.well you got one more subscriber and it is me.nice work keep it up

    1. Thanks Ghost Rider, I appreciate your valuable HOT feedback, Thanks for subscribing ;)
      Damn sure you are gonna get HOT Tips and Tricks in Future (y)

  2. You wrote something that folks could recognize and created the subject intriguing for everybody. Truly, excellent blog you have got here.
    website design

    1. Thanks Website Design for being here, Thanks for your valuable comments :)
      Stay connected via Email Subscription ;-)

  3. This comment has been removed by the author.

  4. Nice widget for blogger. Email subscription widget is really helpful for blog or website. Nice share.

    I have a email subscription widget with different color.

  5. Thank you, I have put the email subscription to my blog. I am new to blogging, i will edit the RSS feed which I still dont know yet.

  6. Thanks A lot man ... I love the widget

  7. Blogger Responsive Subscribe Widget above Footer
    Sharing a new type of subscription widget which i will not call it actually a widget as it is directly injected in the HTML of blogger. This is a nice looking and responsive widget. As most of bloggers prefer responsive widgets we are sharing this to you.

  8. Thank you, I have put the email subscription to my blog. I am new to blogging, i will edit the RSS feed which I still dont know yet.

  9. Your post is very useful and 100% working on my website. Just visit to our webpage Online Shopping Sites

  10. i have not working in this blog

  11. I have not working this code in my this blog please help me when i add this code not working

  12. Thanks for use full post.

  13. Thanks For this. really helped out. check this blog out just started it hope you will like it


Powered by Blogger.