How To Add Email Subscription Widget Below Post In Blogger

Hello guys, today i am going show you how to add beautiful yet simple Email subscription box below blogger post on every page. Subscribers are one of the important factor that affect the existence of the blog. If you don't have any subscribers, it means you don't have any loyal readers. You don't have people waiting for your posts. It will indeed make your blog less lively and least engaged. So the best way to increase subscribers and thereby traffic is to add the email subscription widget powered by feed burner.
This email subscription widget is pretty beautiful and is Highly customized by Css which make it elegant and cool. You can add this widget any where in your blogger blog or WordPress blog. But the recommended option would be to choose the below post area as that is where visitors click are concentrated.

Live Demo

How to Add Subscribe Us widget below post blogger

• Login to your Blogger Dashboard.
• Backup your blogger template.
• Go to Theme >>> Edit HTML
• Now search for below code or similar type of code. ( If possible use Ctrl + F for search ).

]]></b:skin>

• Add the below code right above the ]]></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 with the implementation of CSS code. Now we have place it in the position below every blog post. You can add this email subscribtion widget any where but here we will be adding at the bottom of the page.Hence we need to look for the footer code of the template. Find the below code ( If possible use Ctrl + F for search ).

<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=DigitalNavigate&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 500+ 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='DigitalNavigate'/><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 Subscribtion.</small></p></form></div></b:if>

• The text in red color should be replaced by your feed burner id.

Do let us know… How did like this post ? Do Like and Share it with your friends. Thank you comeback for more