How to add subscription widget below post to blogger blog

A subscription box usually contains a link to your RSS feeds and a Email Form where visitors can submit their Email ID to receive updates from your blog. Blog without a subscription form makes no sense. Subscribers are the backbone of any successful blog. The more readership you have the stronger you get. People subscribe to your Feeds only when you publish quality content. Therefore it is very important that you may try every possible means of increasing the number of subscribers to your blog whether you are a Wordpress user or Blogger user. Adding a email subscription box to blogger or wordpress blogs is very simple. You may need to follow the simple steps below to create an email subscription box for your blog using Some CSS3 Codes. Previously i wrote a tutorial on New Stay Connected Subscription Widget. it is always fun to learn and explore the new standards introduced for CSS. One basic and most important thing to do is to add a subscription box widget to your blog and position it near the top area of your blog just below header. Always keep subscription box to the top right or left position of your sidebars to attract as many people as possible. This subscription widget also optimized for IE7.  So let’s start Tutorial. View Live Demo Below.

 

 

Add it to Blogger Blog.

 

1. Go to your Blogger Dashboard>> Template>> Edit HTML

2. and find the following code.

<data:post.body/>

3. and paste the following code after/below <data:post.body/>

<style>
#bt-subs-box {
background: #F1F1F1;
margin: 0 auto;
padding: 10px;
border: none;
border-radius: 10px;
width:350px;
height:270px;
}

#bt-subs-box h2 {
font-size: 27px!important;
text-align:center;
font-style: italic;
font-variant: small-caps;
}

#bt-subs-box h3 {
font-size: 15px;
font-family: arial, sans-serif;
text-align:center;
font-style: italic;
font-variant: small-caps;
}

#bt-subs-box div.row {
text-align:center;
margin-bottom:10px;
}

#bt-subs-box img{
display:inline-block;
border:none;
}

#bt-subs-box .email {
clear:none;

}

.email {
clear: both;
width: 100%;
margin: 10px 0;
}

.emailform {
position: relative;
width: 300px;
background:#FFF;
margin: 0 auto;
-webkit-box-shadow: 1px 1px 2px #dfdfdf;
-moz-box-shadow: 1px 1px 2px #dfdfdf;
box-shadow: 1px 1px 2px #dfdfdf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: 1px solid #ddd;
}



.emailinput {
height:30px;
margin: 0 auto;
padding: 8px 40px 8px 10px;
border:none;
background: none;
font-family: georgia;
font-style: italic;
font-size: 16px;
color: #666;
}

.emailinput {
padding-right: 30px !important;
width: 260px !important;
}

.emailbutton {
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-moz-border-radius-top-right: 4px;
-moz-border-radius-bottom-right: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
-webkit-border-top-left-radius: 0px;
-webkit-border-bottom-left-radius: 0px;
-moz-border-radius-top-left: 0px;
-moz-border-radius-bottom-left: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding: 9px;
position: absolute;
right: -3px;
top: -1px;
bottom: -1px;
display:block;
line-height:16px;
}

.emailbutton {
padding: 14px !important;
}


.emailbutton, .formbutton {
background: #f7f8f9;
background: -webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: -ms-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background: linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f7f8f9", 
endColorstr="#e9e9e9",GradientType=0 );
border: 1px solid #ddd;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
padding: 6px 12px;
margin:0;
-webkit-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow: 0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color: #888 !important;
text-shadow: 0 1px 0 #fff;
line-height: 1.2;
cursor: pointer;
font-size: 13px;
font-weight: bold;
text-decoration: none !important;
}
.emailbutton:hover, .formbutton:hover {
background: #f1f1f1;
background: -webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: -ms-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background: linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f1f1f1", 
endColorstr="#e0e0e0",GradientType=0 );
text-decoration:none !important;
}
</style>



<div id='bt-subs-box'>
<h2>Do you Like this Article</h2>
<div class='row'>
<div class='fb-like' data-href='http://www.facebook.com/pages/Blogger-Tricks/448418608553191' data-send='true' data-width='300' data-show-faces='false'></div>
</div>
<div class='row'>
<a href="http://feeds.feedburner.com/bl0ggertricks" title="Suscribe to RSS feed"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEic-CIoFkzINhNm_dqva08v40omFIRuorZEOgaOgR0wU_ji_oQD0thHeCQX6yVeVxqqtJ1N8eGjbvJZ_VabruQQWUxWYgWzL0LT5YwCdoRzryOnJF1I8gUkVcslHO5-4NKjoogNpprbKiLQ/s40/w2bRSS+.png" alt='rss'/></a>
<a href="http://twitter.com/bloggertricks" title="Follow me on Twitter"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgc-DTL0FrOa4nGFocaV6bAN19hlM2eMUNl5MKusZxFndMNP-ao7uHA35KAJ1Eh9LPyu8nljCrajr_lLmaYjaPsNfb0NgN71mGe3-pP3KAvHF5H9FdqmXzBPh53CoL2XijjBLoX01KzXCbq/s40/w2bTwitter.png" alt='twitter'/></a>

<a href="http://www.facebook.com/blogger-tricks/448418608553191" title="Became Fan on Facebook"><img class='middle' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig-MeO-B37DGuztQd75xP0QgMrG401FGpJY0Edvl4z6IpcBH2U7rqEd5ldvhFKOQ4QsVEBbMMeR_Na0uK3RVZYx8s_5fc_BMf4n1eQppsqffWC5Y1vYkdEe0RHY7ZDWsl-eZGW0YptEewG/s40/w2bFaceBook.png" alt='facebook'/></a>

<a href="http://www.stumbleupon.com/stumbler/bl0ggertricks/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrb7Q36Kw4hVU0vRJJawFNrF8v1ZWMvZwqry7Q7bOheQd0bTjgZ7_aWPtD-Jd1Tsi11Y2_yRS-t01sTJPm2SNFFndeYJjIlqSxRPmy0VrnRXxmorON3OMJAflBnn8ioFPAiaECbUG1bPkW/s40/w2bStumbled.png"alt='stumbleupon'/></a>
</div>

<div class='row'>
<h3>Get Subscribe to Free Email Updates!!</h3>
</div>

<div class='row'>
<div class='email'>

<form action='http://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks", "popupwindow", "scrollbars=yes,width=550,height=520");return true' class='emailform'>

<input type='hidden' value='bl0ggertricks' name='uri' />
							
<input type='hidden' name='loc' value='en_US' />
							
<input type='text' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter your email...&quot;;}' onfocus='if (this.value == &quot;Enter your email...&quot;) {this.value = &quot;&quot;}' value='Enter your email...' name='email' class='emailinput' />
							
<input type='submit' class='emailbutton' value='SignUp' title=""/>
						
</form>
</div>
</div>
</div>

4. save  the template and you’re done!

 

How To Style and Edit the Widget?

Follow these,  

If you wish to increase or decrease  the width. Change the width section in css code.

You may also customize the look and feel of this widget. The CSS style rules are given with the code above enclosed in the <style>….</style> tag. But if you don't have proper knowledge of HTML/CSS then I strongly recommend you to stick with the same code and do not try to modify it. or tell me below in comments which look you want and i will send you css code for your chosen style..  

 

• Replce “http://www.facebook.com/pages/Blogger-Tricks/448418608553191”
• Replace “http://feeds.feedburner.com/bl0ggertricks” with your feedburner RSS Feed link.
• Replace “http://twitter.com/bl0ggertricks with your twitter profile link
• Replace “http://www.facebook.com/pages/Blogger-Tricks with your Facebook profile  Link
  Replace “http://www.stumbleupon.com/stumbler/bl0ggertricks/” with your sumbleupon profile link

 

For Email Singup Change the following Below link

• Replace “http://feedburner.google.com/fb/a/mailverify?uri=bl0ggertricks” with your feedburner RSS Email Link
• Replace  value="bl0ggertricks" with your feed burner username

I would be really pleased to hear about your suggestions and feedback. If you faced any trouble then do not panic and let me know  about your feed back below in comments box. stay updated by subscribing our email or like us our page on facebook, Google, or follow me on twitter.. thanks for reading our post. happy blogging.…..!!!!