Add Beautiful Email Subscription Widget Below Post For Blogger

Today in this post I am giving you a Email Subscription Form to add below every blog posts. By adding this Email Subscription Form you can boost you Feed burner readers. So are you ready to Add this ? So let’s get started. Below is the Screen shot of the Email Subscription Form on how it looks.
Email Subscription widget

How to add subscribe us widget below post blogger

  • Login to your Blogger Dashboard.
  • Go to Template –> Edit HTML.
  • Find the below code on your blogger template
]]></b:skin>
  • Add this CSS before the searched code ]]></b:skin>
#emailsub{clear:both;background:#3C3C33;color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#emailsub
h4{font-size:24px;border-bottom:1px solid #746E6E;padding:10px;letter-spacing:2px}#emailsub input[type=&quot;email&quot;],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;width:50%;border:none}#emailsub
form{text-align:center;padding:20px
90px}#emailsub input[type=submit]{border-radius:0;box-shadow:none;padding:18px
24px 16px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#emailsub
.counter{margin:0
0 25px}#emailsub.efooter{background:none}#emailsub.efooter
form{text-align:left;padding:0}#emailsub.efooter input[type=&quot;submit&quot;],#emailsub.efooter input[type=&quot;email&quot;],.wg_in_mail{padding:10px;letter-spacing:0px}#emailsub.efooter.sidebar{background:#3C3C33;padding:20px}#emailsub.efooter.sidebar
form{text-align:center}
  • Now we have completed adding styles of the Gadget.
  • Now we need to add the position of this widget according to your need. You can add this Email Subscription widget any where but here we will be adding at the bottom of your blog posts because readers after reading your posts they might subscribe for your future posts also.
  • Find the below code using Ctrl + F.
<div class='post-footer-line post-footer-line-3'>
  • Immediately after the code add the below code
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=MyBloggingTechniques&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>Join with 549 Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox and <b>Get Giveaways, Tips to Become a GEEK!</b></div><input class='sl_in_mail' name='email' placeholder='Enter Your Email Address' type='email'/><input name='uri' type='hidden' value='MyBloggingTechniques'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='SUBSCRIBE'/><p/><p/><p><small>When signing up you will initially receive a confirmation email requiring your approval to complete the Subscription.</small></p></form></div></b:if>
  • The text in Red colour ( MyBloggingTechniques ) should be replaced by your Feed burner Name.
Follow :
Facebook
Twitter
Google+
Like the post? Never miss another. Get all our posts directly to your e-mail. Subscribe to our newsteller today

1 comments:

Thanks man for your tips.. it has helped me alot.. check it out here ..http://100computertricks.blogspot.com/

Post a Comment

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1) Do not include links in comments as they will not be published after moderation !
2) Make sure that you "subscribe by mail" to get notified to reply to your comments.
3) Please do not Spam... Spam comments will be deleted immediately upon our review.

Proudly powered by Blogger