Monday , 24 July 2017

TUTORIAL: Add Email Subscription Box Below Posts in Blogger

Subscribe-via-EmailToday we are providing details about an email subscription box widget. We are going to discuss how to add an email subscription box below posts within Blogger. You probably know very well that subscribers are one of the most important parts of your blog to make it awesome and famous. With subscribers you can get a lot of free traffic to your blog. There is a default widget for an email subscription box in Blogger, but it does not show below each post we means we are not maximizing our chances to get more subscribers on FeedBurner. So let’s get started.

How to show an email subscription box below posts

1. Go to Blogger > Template > Edit HTML > Proceed.
2. Just check the box Expand Widget Templates on the top left corner.
3. Now press Ctrl+f to search for the following line of code:

]]></b:skin>

4. When you find that line of code, right above it, paste the following code:

/* Starting of Email Subscription Box Provided by www.ExtremeTechBlog.com */
.enteryouremail {
background: #fff !important;
border: 1px solid #d2d2d2;
padding: 0px 8px 0px 8px;
color: #a19999; font-size: 12px;
height: 25px; width: 165px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin:0px;
}.submitbutton {
background:grey;
border: 1px solid black;
box-shadow: 3px 3px 3px grey;
font:bold 12px Arial, sans-serif;
color: #fff;
height: 25px;
padding: 0 12px 0 12px;
margin: 0 0 0 5px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
cursor:pointer;
}
/* Ending of Email Subscription Provided Box by www.ExtremeTechBlog.com */

5. Now again search for:

<data:post.body/>

6. Right below that line of code paste the following code:

<center>
<br />
<h3 style="color:grey;">Subscribe us to receive free updates in your inbox:</h3>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=extremetechblog', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email here...&#39;;}" onfocus="if (this.value == &#39;Enter your email here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="extremetechblog" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
<p style='font-size:9px; float: right;'>
Powered by <a href='http://www.extremetechblog.com/2012/08/add-email-subscription-box-below-each-post-in-blogger.html'>ETB</a></p>
</center>
  • Replace extremetechblog with your FeedBurner username.
  • Also replace extremetechblog with your FeedBurner username.

7. Now just click on Save template and you should have added it successfully.

Leave a Reply