Menu Close Menu

How to add subscription widget below post to blogger blog

subscription box for blogger 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.

 

Subscription widget for blogger blog

 

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="http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaXDrh48I/AAAAAAAAAVM/zLmcNtCgi9Y/s40/w2bRSS+.png" alt='rss'/></a>
<a href="http://twitter.com/bloggertricks" title="Follow me on Twitter"><img class='middle' src="http://2.bp.blogspot.com/_nDNgmK8FIyI/TUJaUf7v0CI/AAAAAAAAAU8/7vfe8Iw3ohc/s40/w2bTwitter.png" alt='twitter'/></a>

<a href="http://www.facebook.com/blogger-tricks/448418608553191" title="Became Fan on Facebook"><img class='middle' src="http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaWNBkZnI/AAAAAAAAAVE/nZ0byXaqur8/s40/w2bFaceBook.png" alt='facebook'/></a>

<a href="http://www.stumbleupon.com/stumbler/bl0ggertricks/"><img src="http://1.bp.blogspot.com/_nDNgmK8FIyI/TUJaXqfx60I/AAAAAAAAAVQ/CmNcj4VJjns/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.…..!!!!

"Be the first to express your thoughts" :

  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  17. This comment has been removed by a blog administrator.

    ReplyDelete
  18. This comment has been removed by a blog administrator.

    ReplyDelete

Important - Make sure to click the "Subscribe By Email" link below the comment for to be notified of follow up comments and replies.If you use Name/URL don't use keywords as your name. We love to hear from you! Leave us a comment.
To ensure proper display, HTML/XML/JavaScript need to be Encode first using this Encoder Tool Then paste the Encoded code here.