Latest: Unlock ZTE Modems | Adsense Approval Tips | Wordpress Themes 2013 | Change A Blogger Template | Windows 7 Antivirus | Backlinks Generator |

Thursday, 20 June 2013

Add Email Subscription Form Below Post In Blogger

In this tutorial am going to share with you how to add an awesome subscription form below blog post. Subscription form is one of the major key of driving traffic to a blog. Because it helps in keeping your readers with up to date tutorials, i.e whenever you published a new posts, your readers would automatically be notified instantly, and this would definitely result in fetching you more and more traffic as long as you keep updating your blog with fresh posts. These's great! isn't it?

Add Subscription Form Bellow Posts.

In my earlier posts i shared a similar tutorials on adding a wordpress like subscription widget to a blogger blog sidebar. Perhaps you don't know how important is these subscription form, then you just have to give it a try and see how it works for you. As we all knows that getting a targeted audience is not that easy without hard working.

With this in mind, you have to try out different techniques to build a large audience around your blog. Introduce something catchy for your readers that would give them the reason of visiting your blog.

We created these nice subscription form because we know what our readers like. This subscription form is supported in all major browsers including IE9+.

How To Add The Subscription Form Below Post?

1.  Log in to your Blogger's Dashboard 
2.  Click on Template => Edit HTML
3.  Click anywhere inside the Template Editor and press Ctrl F, search for this code: <data:post.body/>
4.  Now just below/after <data:post.body/> paste the following codes:


<!--BlogStable.com Subscribe Form Below Posts-->
<style type="text/css">
#post-subscription {
background-color: #DFF1FE;
width: 100%;
height: 140px;
line-height: 1.5em;
margin: 5px 0px 20px;
border: 1px solid #00477D;
}
#post-subscription p {
font-family: Gabriola, Aharoni, Times, "Times New Roman", serif;
color:#000;
font-size: 20px !important;
font-weight: 900;
text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
margin: 10px 0 -20px;
padding: 0 5px;
}
#post-subscription form{
background: url("http://3.bp.blogspot.com/-CkGk6h4sx3w/UboChwrVrMI/AAAAAAAAA_w/8t3Bjd-Zvxg/s1600/subscription-arrow.png") no-repeat scroll 40px 0px transparent;
}
#post-subscription input {
border: 1px solid #555;
box-shadow: 0px 2px 2px #999;
-moz-box-shadow: 0 2px 2px #999;
-webkit-box-shadow: 0 2px 2px #999;
}
#post-subscription input.email {
background: white url(http://2.bp.blogspot.com/-dcien5QLnB8/UOb4N7eNU1I/AAAAAAAAAhw/NxzO8UXjgG4/s1600/subscribe-email.png) no-repeat
center right;
}
#post-subscription input[type="text"] {
font-size: 14px;
margin-top: 10px;
padding: 10px 28px 10px 5px;
width: 230px;
}
#post-subscription input[type="submit"] {
background: linear-gradient(to top,  #A61717,#FEC8C8);
border: 1px solid rgba(0,0,0,0.4);
color: white;
cursor: pointer;
font-size: 13px;
font-weight: bold;
padding: 10px 2px;
text-decoration: none;
text-shadow: 1px 2px 2px rgb(158, 23, 23);
margin: -5px;
}
#post-subscription input[type="submit"]:hover {
background: linear-gradient(to bottom,  #A61717,#FEC8C8);
border: 1px solid rgba(0,0,0,0.4);
}
</style>
<div id='post-subscription'>
<center>
 <p>
Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.
</p>
<br/>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?  uri=BlogStable&apos;, &apos;popupwindow&apos;,   &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
 <input name='uri' type='hidden' value='BlogStable'/>
<input name='loc' type='hidden' value='en_US'/>
 <input class='email' name='from' onblur='if(this.value==&apos;&apos;)  this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)  this.value=&apos;&apos;;' type='text' value='Enter Your Email Here... '/>
<input type='submit' value='Subscribe Now'/>
</form>
</center>
<center>
<a href='http://feeds.feedburner.com/BlogStable'>
<img alt='' height='26' src='http://feeds.feedburner.com/~fc/BlogStable?bg=99CCFF&amp;fg=444444&amp;anim=1' style='background-color: inherit; border:0' width='88'/>
</a>
</center>
</div>
<!--BlogStable.com Subscribe Form Below Posts Ends-->
5.  You have to make some changes on the codes. Change BlogStable to your feeburner address.
6.  You also have to change your feed-count address, in other to keep records of your subscribers. Add your feed-counter address by changing BlogStable to your own feeds address.
7. to customize the subscription form background color, simply change this code #DFF1FE; You can also use our Color Code Generator to select your favorite color.

Feedback!

If you have any difficulties adding these subscription form to your blog, kindly leave your query via comment. Also remember to share it to your friends on social networking sites like facebook and twitter.
You don't want to miss any of our future updates? Do well to subscribe to our RSS feeds, so as to get our latest posts delivered directly to you email. Happy blogging pals.

Subscribe to Get Free Blogging Tips And Quality Tutorials Straight in Your Inbox.




20 comments :

  1. Hmmm its an awesome widget. super lyk

    ReplyDelete
    Replies
    1. Am glad you like it. Thanks for stopping by.

      Delete
  2. Hey Victor, Thanks a lot dear for sharing your widget with us. You are really helping guy. Please continue your support with us.
    Regards!
    Ankit :)

    ReplyDelete
    Replies
    1. Thanks bro Ankit for the inspiring contribution. Always keep visiting for more...

      Delete
  3. Hello Victor,

    You truly know how to give tutorial. I love how you did it, it is very understandable and comprehensive.
    It feels good giving other bloggers your cool stuffs right? The subscription form was beautiful. Happy tutoring and do have a blessed day...

    ReplyDelete
    Replies
    1. Thanks so much bro Babanature for stopping by and leaving such an inspiring comment. Thanks bro...

      Delete
  4. nice widget bro..keep sharing...

    ReplyDelete
    Replies
    1. Thanks so much bro Adrian for commenting. Do have a wonderful weeks ahead.

      Delete
  5. It's certainly great position for email subscription form.

    ReplyDelete
    Replies
    1. Thanks bro Okto for stopping by. Do have a great weeks ahead...

      Delete
  6. Aweosme Widget :) This really help to get more email subscribes.. Thanks for sharing

    ReplyDelete
    Replies
    1. I really appreciate your comment bro Zeeshan. Stay tune for for more..

      Delete
    2. You are warmly welcome ;)

      Delete
  7. you are one great guy, thanks alot for this!, i really appreciate it.

    ReplyDelete
    Replies
    1. Thanks for the inspiring words... We'll always make sure to provide our readers with a useful tutorials.. Keep on visiting..

      Delete
  8. Victor Noah,

    Great work. this was pretty easy.

    Have integrated the code on my site.
    on wordpress.org sites you will have to locate content-single.php under theme section and post the above mentioned code below this line

    ReplyDelete
  9. Great widget thanx for sharing with us.enjoy your post very much :)

    ReplyDelete
  10. Very Nice Box... Thanks fro sharing

    ReplyDelete
  11. very nice box ... can add this in sidebar.. please reply dear

    ReplyDelete
  12. Did not work for me. If you may check the problem from page source, I'll be thankful. wellnesswithsameer.com

    ReplyDelete

Copyright @ 2013 BlogStable.com | All Right Reserved | Designed By: Victor Noah| Privacy Policy | Sitemap || Powered By Blogger & NameCheap