Customized Subscription Box With Social Media Following Buttons

Every blogger love to have huge subscribers list for his/her blog. Subscribers list will help you to expose your post to your readers. By having a large and engaged subscriber list you can monetize your blog easily. Now for having a large and huge email subscriber list you must have a cool and attractive subscription box. Subscription box should be attractive enough to catch visitor's attention, here is a subscription box with social following buttons. I found this subscription box widget ABT(One of my favorite blog about blogging tips). This subscription box will let your readers to subscribe to your mailing list, RSS feeds and also let them to join your social profiles on Facebook, Google plus and Twitter.

How To Add Subscription Box With Social Media Following Buttons : 

1). Go to Blogger dashboard > Design > Page Elements

2). Select "Add A Gadget"

3). Choose "Html/Javascript" paste the code given below inside it.

<style type="text/css">
/* SBT subscription box */
#sbt-subscription-box .fb-like-box { border: 1px solid #EBEBEB; padding: 5px; background:#fff;}
    #sbt-subscription-box .gplusone { background: #f7fcfc; border: 1px solid #EBEBEB; border-top: 1px solid #fff; color: #000; font-size: 10px; line-height: 1px; padding:5px;}
    #sbt-subscription-box .twitter-follow { background: #eef9f9; border: 1px solid #dff6f6; border-top: 1px solid #fff; padding:5px 11px;}
    #sbt-subscription-box .email-box {background:#e3edf4; padding:11px;}
        #sbt-subscription-box .email-box h4{color: #555;font-family: Arial;font-size: 12px; margin: 0 0 10px;}
        #sbt-subscription-box .email-box .txt,#sbt-subscription-box .email-box .txt:focus{background:#fff; float:left; color:#92c3c3; border:1px solid #E36B0A; border-radius: 3px; padding: 7px 10px 8px; width: 147px;}
        #sbt-subscription-box .email-box .btn,#sbt-subscription-box .email-box .btn:focus{background:#E36B0A; border:1px solid #AD5513; color:#fff; border-radius: 1px; float: right; font-size: 12px; font-weight: bold; padding: 5px 5px; }
            #sbt-subscription-box .email-box .btn:hover{#E36B0A;}
input, textarea {
font-family: Georgia, "Times New Roman", Times; font-size: 1em;}
#sbt-text {
background:#C8E993;
border: 1px solid #CCC;
box-shadow: 0 0 5px
#EEE;
line-height: 10px;
margin: 10px 10px 15px 0;
padding: 10px;
width:280px;
}
</style>
<div class="sbt_widget">
<div id="sbt-subscription-box">
<div class="email-box">
<h4>Subscribe For FREE updates on your <a href="http://feedburner.google.com/fb/a/mailverify?uri=Smartbloggertricks" target="_blank">Email</a> | <a href="http://feeds.feedburner.com/Smartbloggertricks"target="_blank">RSS</a></h4>
<form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=smartbloggertricks', 'popupwindow',
'scrollbars=yes,width=400px,height=400px');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">
<input name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter your email address&#39;;}" onfocus="if (this.value == &#39;Enter your email address&#39;)
{this.value = &#39;&#39;;}" value="Enter your email address" class="txt" />
<input type="hidden" name="uri" value="Smartbloggertricks" />
<input type="hidden" value="en_US" name="loc" />
<input type="submit" value="Subscribe" class="btn" />
<div style="clear:both;"></div>
</form>
    </div>
    <div class="fb-like-box">
      <iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.facebook.com%2FTclDailyin&amp;send=false&amp;layout=button_count&amp;width=80&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:80px; height:21px;" allowtransparency="true"></iframe><a href="http://www.facebook.com/TclDailyin" target="_blank" rel="nofollow" style="color: #3B5998; font-family: arial; font-size: 18px; font-weight: bold; line-height: 20px;"> Like us on Facebook </a><div class="clear"></div>
    </div>
    <div class="gplusone">
<div style="float:left;width:90px;">
<g:plusone href="http://www.smartbloggertricks.com"></g:plusone>
</div>
<a href="https://plus.google.com/108552495163038192706" target="_blank" rel="nofollow" style="color: #d00; font-family: arial; font-size: 18px; font-weight: bold; line-height: 24px;">Circle us on Google+</a><div class="clear"></div>    
    </div>
    <div class="twitter-follow">
  <a href="https://twitter.com/tarunjaitely" class="twitter-follow-button">Follow @tarunjaitelty </a>
<script src="//platform.twitter.com/widgets.js" type="text/javascript"></script></div> </div>
</div> 

4). Replace Smartbloggertricks with your feedburner uri value.

5). Replace http://feeds.feedburner.com/Smartbloggertricks with your feedburner feed address.

6). Replace TclDailyin with your facebook's fan page url.

7). Replace https://plus.google.com/108552495163038192706 with your Google plus account url.

8). Replace tarunjaitely with your Twitter username.

Now save the widget.

9). Now go to Blogger Dashboard > Design >Edit Html

10). Back up your template and search for </head>

11). Add the following code just before </head>

<script type='text/javascript'>
  (function() {
    var po = document.createElement(&#39;script&#39;); po.type = &#39;text/javascript&#39;; po.async = true;
    po.src = &#39;https://apis.google.com/js/plusone.js&#39;;
    var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(po, s);
  })();
</script>

12). Save your template, now you are done with all the steps.

Credits : 

You can share this subscription box with your readers, you will have to give credit to SBT by giving a link back to this post. You may also give the credit to the ABT for the wordpress version of the widget.

Need Help ?

Do let me know via comment if you have any kind of problem regarding this subscription widget. I hope you liked this customized subscription box with social media following buttons.