Beautiful Email Subscription Widget Below Post For Blogger

In this tutorial you will learn how to add Beautiful email subscription box below blogger post.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 cool 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.Bu the recommended option would be to choose the below post area as that is where visitors click are concentrated.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

 #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}

7. Go to blogger and click Layout

8. Click Add Gadget and select 'HTML/Javascript

9. Paste 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=yourID&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='yourID'/><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>

Replace yourID with your link:

10. Now save your HTML/Javascript'.
    You are done...  


OR


Now we have completed adding styles.now we need to postion thi swidget acording to our needs.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 [You can press 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=YourID&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='YourID'/><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 can be replaced by your feed burner id.