How to add subscription widget below post to blogger blog | My Blogger Tricks

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.…..!!!!

21 comments :

  1. Awesome subsciption widget design, Nice and clean. Thank's a lot...

    ReplyDelete
  2. I like the widget.But can you say how to increase the width of the subscription box??

    ReplyDelete
    Replies
    1. @Dreamtechblog
      Thanks for liking our widget..
      you can increase the widget width by change width in these three section.

      1. in First Section You can increase your widget background width.
      2. in section two you can increase email form width.
      3. in section three you can increase input width..


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

      .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 {
      padding-right: 30px !important;
      width: 260px !important;
      }

      Nice to see you on our blog.
      Thank you..

      Delete
  3. nice. it worked well on my blog, www.inspirenaija.com. please how do i shift it to the left side of my blog?

    ReplyDelete
    Replies
    1. <div style="padding:5px; float:left;">

      Here is your widget code

      </div>

      if you want to align at right side just change this line.
      Float: right;

      Delete
  4. email subscription widget is necessary for the loyal traffic , it is also important from the perspective of search engine optimization.your widget is auxiliary and behaving correctly at work.as we know a blog is known by the numer of its subscribers and loyal traffic.well you got one more subscriber and it is me.nice work keep it up

    ReplyDelete
  5. Thank For Your Help.Be Continue

    ReplyDelete
  6. I want a like button,twitter follow button above the flags...could you do this?? and please make it of white colour..!
    thanks for reply in advance..

    ReplyDelete
    Replies
    1. @Athul Menon
      in ramzan we are very busy... after ramzan we will try to post newer version for this widget.. with twitter follower button.
      THanks..

      Delete
  7. Thanks for nice solution my problem.

    ReplyDelete
  8. Is there a way to tell how many subscribers you have?

    ReplyDelete
  9. I tried it and nothing popped up. :(

    ReplyDelete
  10. hey i could find body tag in the edit html page

    ReplyDelete
  11. i cannot find body tag in edit html page

    ReplyDelete
  12. great widget. thanx for sharing.keep it up

    ReplyDelete
  13. great widget,, thanks for share this. ill get this widget for my blog

    ReplyDelete
  14. it did not work on mine. It says

    "Error parsing XML, line 1595, column 174: Element type "alt" must be followed by either attribute specifications, ">" or "/>".
    Hide notification "

    ReplyDelete
  15. Big thanks to this. I'm gonna use this widget.

    ReplyDelete
  16. hi i tried your widget but it also showing on my homepage also even i give a break on my posts..but its showing every post on homepage..? please solve it

    ReplyDelete
    Replies
    1. @Key Sab

      You need to use conditional tag for removing widget from homepage..
      Follow the linke below.

      http://www.myblogger-tricks.com/2012/11/show-widgets-only-homepagepostpagestati.html

      Delete

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.

Get Widget

Receive All Free Updates Via Facebook.