Monday, January 9, 2012

[How To] Add a Social and Email Subscription Box Below Every Post in Blogger

A subscription box doesn't really help you out to get the highest level of subscribers when it's on the sidebar. Hence, if you have a subscription box below your posts then it may help you to achieve targeted subscribers for your blog. And this tutorial will definitely lead you to add an email subscription box with social subscription support below your every blogger posts.

This is how the subscription box looks like:


How to add a social and email subscription box below every blogger posts?

Step One: Go to Design => Edit Template [In new blogger interface: go to Template => Edit HTML].

Step Two: Click on Expand widget Template  and find /* FOOTER */  .

Step Three: Just above /* FOOTER */  paste the following code. 

.stay-connected {
background: #ffffff;
margin: 10px 0 10px 0;
padding: 10px;
border: 1px solid #E6E6E6;
overflow: auto;
}
#stay-icons {
float: left;
margin: 0 5px 0 0;
padding: 2px;
}
/*end stay connected*/

Step Four: Then Find <data:post.body/> and the paste the following code just below <data:post.body/>.


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='stay-connected'><h2>Stay Connected With Free Updates</h2><table border='0'><tbody>
<tr><td>
<a href='YOUR FEEDBURNER URL' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://cdn1.iconfinder.com/data/icons/functionsocial/Social_RSS.png'/></a></td><td>
<a href='http://twitter.com/USERNAME' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://cdn1.iconfinder.com/data/icons/functionsocial/Social_Twitter.png'/></a></td><td>
<a href='FACEBOOK PAGE URL' imageanchor='1' style='margin-left: 1em; margin-right: 1em;' target='_blank'><img border='0' src='http://cdn1.iconfinder.com/data/icons/functionsocial/Social_Facebook.png'/></a></td><td>

<div class='spice-email' style='margin-left:20px;'>
Subscribe via Email
<form action='http://feedburner.google.com/fb/a/mailverify' id='feedform' method='post' onsubmit='window.open(&apos;FEEDBURNER FEED NAME&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=520,height=520&apos;);return true' target='popupwindow'>
<input class='textarea' gtbfieldid='3' name='email' 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'/>
<input name='uri' type='hidden' value='FEEDBURNER FEED NAME'/><input name='loc' type='hidden' value='en_US'/>
<input class='spice-emailsubmit' type='submit' value='Submit'/>
</form>
</div></td></tr></tbody></table></div>
</b:if>
Note: You can also paste this code below <div class='post-footer-line post-footer-line-1'> at times to show it below other widget's. [Don't forget to change the RED texts with your blog's information] 

Step Five: Click on Save Template.

You're all done with adding an email subscription box below your blogger posts. If you face any kind of problems then leave a comment below.