blogger-simple-subscription-widget
I am sharing you the email subscription widget for blogger blog. This subscription widget helps the visitors to subscribe your blog. Then they will get your new post directly to their email inbox. I think, i don't need to tell you this.
This is a simple subscription widget. It looks nice and beautiful below your blog post where visitors can view it easily. So if they like your blog then they can subscribe your blog easily. The another benefit of this widget is that it's fast loading and will not affect your blog loading speed.
simple-blogger-subscription-widget
Follow the steps below to add it on your blog. But before that, if you want to see working it then you can see demo.

Add Fast Loading Simple Email Subscription Widget

Before starting to add this widget on your blog, I recommend you to Back Up You Blogger Template .
  • Go to Blogger Dashboard > Template > Edit HTML option.
  • On the Template editor search (Ctrl+f) for ]]></b:skin> and add the below code just above / before ]]></b:skin> .
/* The SpicyTechTips.com CSS Code for email subscription starts */
#STT {background: #F5F5F5;text-align: center;width: 100%;display: block;margin: 10px 0 0px 0;height: 80px;border: 1px solid #377105;}
.Internet-Email {color: #444242;width: 35%;background: #fff url(http://3.bp.blogspot.com/-_ELQeuEMmIQ/VQ7E-Uj8-FI/AAAAAAAAKgw/rcZSavrUhMQ/s1600/mail.png) no-repeat 8px 7px;padding: 6px 0px 5px 30px;border-radius: 3px;border: 1px solid #000;margin: 5px 2px;}
.mail-button:hover {background: #AB1229;border: 1px solid #000;}
.mail-button {background: #52B225;cursor: pointer;color: #FFF;font-weight: bold;border: 1px solid #000;border-radius: 2px; font-size: 15px;padding: 4px 15px 4px 19px;margin-left: 15px;}
#Headline {text-align: center;color: #0D862F;font-size: 12px;line-height:20px;padding: 9px 0 0 0; margin-bottom: 4px;font-weight: bold;font-family: sans-serif;}
We have added the CSS Code. Now time to add HTML Code to make this widget work.
  • Again on the Template editor search (Ctrl+f) for <div class='post-footer-line post-footer-line-1'/> and add the below code just after it.
<!--STT Email Subscription Starts-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='STT'><div id='Headline'>Don't Miss Any New Updates, Learn Blogging Tips, Blogger Widgets Make Money Online</div><form action='http://feedburner.google.com/fb/a/mailverify' class='btntEmailform' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=SpicyTechTips&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><input name='uri' type='hidden' value='SpicyTechTips'/> <input name='loc' type='hidden' value='en_US'/> <input class='Internet-Email' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your Email Address&quot;;}' onfocus='if (this.value == &quot;Enter your Email Address&quot;) {this.value = &quot;&quot;}' required='' type='text' value='Enter your Email Address'/> <input class='mail-button' title='' type='submit' value='Subscribe Us'/></form><div class='clr'/></div></b:if>
<!--STT Email Subscription Ends-->
If you don't find  <div class='post-footer-line post-footer-line-1'/> then search for (Ctrl+f) <data:post.body/>  and add the above code after it.

Customization : 

  • Replace SpicyTechTips with your feedburner username.
  • You can change Don't Miss Any New Updates, Learn Blogging Tips, Blogger Widgets Make Money Online with your own word.
Save the template and you are done.

If you find some problem adding this widget on your blog then feel free to ask us. And don't forget to share it with your friends.

1 comment to '' Add Fast Loading Simple Email Subscription Widget Below Post on Blogger Blog "

ADD COMMENT