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?
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+.
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+.
- Must Read:- How To Add Wordpress Like Subsription Box To Blogger Blog
- Must Read:- 8 Most Effective Ways To Drive Traffic To Your Blog
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:
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.
<!--BlogStable.com Subscribe Form Below Posts-->5. You have to make some changes on the codes. Change BlogStable to your feeburner address.
<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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCiU2ufT9BeNTtqDN85cZY6ByNwSKKZpiPyTNneDFr07BXJ8BpQ6dJ2Tdw71rDesKDNbrQ1hyphenhyphenPmea7kp5hv_oTddcLwHkvJsoR2F-yU_TWOmenBk9yC3boIW6HxoR-MTNqUaw450VyCBEz/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAxqTzQads1Lr7FgKuNH0L5MUMdekvjlbRybAnZsRnYJmqctfkB1PJq4TwOvb77kMwzi6nNlhbfdMMqGE3gdfmj9SYznn7QXIPfofN7NySpky9-b1zOQEaPrUWCkvNc5QwLQ_W_uR3Iy3Q/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('http://feedburner.google.com/fb/a/mailverify? uri=BlogStable', 'popupwindow', 'scrollbars=yes,width=550,height=520');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=='') this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue) this.value='';' 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&fg=444444&anim=1' style='background-color: inherit; border:0' width='88'/>
</a>
</center>
</div>
<!--BlogStable.com Subscribe Form Below Posts Ends-->
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.
Categories:
Blogger Tricks,
WIDGETS
.gif)
.gif)
.jpg)
.jpg)
.jpg)
0 comments:
Post a Comment