How to add Subscription Box [E-mail Subscription Box] below every post in Blogger!

August 14, 2014 Mohit Chauhan No Comments

To increase your blog traffic it is a good idea to set up the subscriber box below or above posts.It will also help your reader to get a new post directly in their inbox whenever you posts a new article.
The design of the subscription Box i am providing is very neat and clean.Also you can customize the Subscriber post according to your need i.e changing color of the email subscription box or changing the size of the box and many more..!add subscription box below every post

STEPS:

  1. Login to your Blogger dashboard
  2. Goto template->Edit Html
  3. Search “data:post.body/” without inverted comma by pressing CTRL+F.You may get 3-4 search results,however you have to paste the below code after the second result..But you can check the subscriber box placement by pasting the code after data:post.body/ ..as it Depends on your Template also.
  • CODE:

<!–Subscriber box By TechTechnik–>
<STYLE>
#wpbt-sub-box{background:#000000 ;border:1px
solid #1A2638;border-radius:10px; margin-bottom:10px;padding:10px;text-align:center;background: -moz-linear-gradientundefinedtop, #333, #1a2638)}
#wpbt-sub-box h1{margin-top:5px; color:#02ab68;font-family:georgia;font-size:25px;margin-bottom:5px;padding:0;line-height:35px}
#wpbt-sub-box input{background: -moz-linear-gradientundefinedcenter top , #FFFFFF, #EFEFEF) repeat scroll 0 0 transparent;border:medium none;border-radius:10px 10px 10px 10px;font-size:14px;padding:10px;

#FFF;width:280px; color:#666; font-family:georgia; margin-bottom:5px;}
#wpbt-sub-box .submit{background: -webkit-gradientundefinedlinear, left top, left bottom, fromundefined#369a18), toundefined#205f0d));background: -moz-linear-gradientundefinedcenter top , #369A18, #205F0D) repeat scroll 0 0

transparent;color:#000000;cursor:pointer;font-weight:bold;margin-left:20px;width:120px; font-family:georgia; margin-left:5px;}
#wpbt-sub-box .submit:hover{background: -moz-linear-gradientundefinedcenter top , #46B725, #205F0D) repeat scroll 0 0 transparent}
#wpbt-sub-box .submit:active{background: -moz-linear-gradientundefinedcenter top , #46B725, #205F0D) repeat scroll 0 0 transparent}
</STYLE>
<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<DIV id=’wpbt-sub-box’><H1>Get Free Updates in your Inbox!</H1><FORM action=’https://feedburner.google.com/fb/a/mailverify’ method=’post’ onsubmit=’window.openundefined&apos;   https://feedburner.google.com/fb/a/mailverify?uri= btuition&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true’ target=’popupwindow’>
<CENTER> <INPUT name=’email’ onblur=’if undefinedthis.value == &quot;&quot;) {this.value = &quot;Enter Your Email Address…&quot;;}’ onfocus=’if undefinedthis.value == &quot;Enter Your Email Address…&quot;) {this.value = &quot;&quot;}’ size=’30’ type=’text’ value=’Enter Your Email Address…‘/> <INPUT name=’uri’ type=’hidden’ value=’techtechnik‘/> <INPUT name=’loc’ type=’hidden’ value=’en_US’/> <INPUT class=’submit’ type=’submit’ value=’Subscribe‘/></CENTER></FORM></DIV>
</b:if><SPAN style=’font-family: Times New Roman;’><SPAN style=’white-space: normal;’>
</SPAN></SPAN>
<!–Subscriber box End–>

However,you can edit the subscriber box(height,width,submit button text etc etc) by changing the highlighted text to fit your need..!!Also Don’t forget to replace techtechnik with your feedburner feed ..!!
Enjoy!
 

Note:

To receive Email-Subscriptions updates via Email you have to firstly activate Email subscription for your feed..To activate firstly go to Google Feedburner and then follow steps given in below image:
feedburner