Add A Cool Subscription Box For Blogger In Sidebar

Email subscribers is becoming a major concern for every blogger over the internet.Using the default subscription box by feedburner will not gain as much subscribers as a customized subscription box will gain.Take a look at the image attached with this post.The sharing buttons have a little bit nudging effect.This subscription widget contains CSS sprites.

Follow these simple steps to add this widget in your blog,
1).Go to Blogger Dashboard>Design>Page Elements.
2).Select "Add a Gadget".
3).Choose "Html/JavaScript" and paste the following code inside it,

.sBlack {
background: none repeat scroll 0 0 #282828;
height: 95px;
padding-bottom: 10px;
.sBlack .subscribeTop .mcLeft {
background: url("") no-repeat scroll 0 -173px transparent;
display: block;
float: left;
height: 83px;
margin: 8px;
width: 101px;
.sBlack .subscribeTop .mcRight {
display: block;
float: left;
margin: 0;
width: 165px;
.sBlack .subscribeTop .mcRight h4 {
background: url("") no-repeat scroll 0 -305px transparent;
display: block;
height: 15px;
margin: 10px 0 0 -2px;
text-indent: -9999px;
width: 164px;
z-index: -1;
.sBlack .subscribeTop .mcRight div.getposts {
color: #767676;
font-size: 11px;
line-height: 13px;
margin: 3px 0 -5px;
text-shadow: none;
.sBlack #mc_embed_signup fieldset {
border: medium none;
margin: 0;
padding: 0;
.sBlack .subscribeTop .mcRight form.getfrom {
margin-top: -5px;
padding: 0;
.socialsharebuttons {
background: none repeat scroll 0 0 #F2F2F2;
border-bottom: 1px solid #E6E6E6;
border-top: 1px solid #E6E6E6;
display: block;
margin: 10px auto 10px 0;
overflow: hidden;
padding-top: 6px;
.social { float: center; }
.social li { float: left; margin: 0 0 0 5px; }
.social li a { background: url( no-repeat; display: block; height: 35px; text-indent: -999em; width: 32px; }
.social li a.rss { background-position: 0 -263px; }
.social li { background-position: 0 0; }
.social li a.facebook { background-position: 0 -99px; }
.social li a.twitter { background-position: 0 -363px; }
.social li a.technorathi { background-position: 0 -326px; }
.social li { background-position:0 -136px; }
.social li { background-position: 0 -400px; }
.social li a.subscribe { background-position: 0 -300px; }
.social li a.mailbox { background-position: 0 -173px; }
.social li a.subscribe { background-position: 0 -300px; }
.social li a.mailbox { background-position: 0 -173px; }
.social li a:hover { position: relative; top: -2px; }
<div style="margin-left:0px; margin-top:-5px;" class="sbBlock sBlack">
<div id="mc_embed_signup" class="subscribeTop clearfix">
<div class="mcLeft"></div>
<div class="mcRight">
<h4>Subscribe now</h4>
<div style="margin-bottom:2px;" class="getposts"><strong>Subscribe By Email To Receive Free Updates</strong></div>
<div style="clear:both;"></div><form target="popupwindow" style="border:none;text-align:left;" onsubmit="'', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" method="post" class="getform" action=""><input type="text" style="width:128px; height:16px;" name="email" 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" /><span class="float:left;"><input type="hidden" value="NewTricksNTips" name="uri" /><input type="hidden" value="en_US" name="loc" /><input type="submit" style="padding-top:3px; padding-left:1px; margin-bottom:-2px; margin-left:2px; padding-right:1px; border: 1px solid #333333;cursor: pointer; background-color: #828282;text-decoration:bold; color: #000; padding-bottom:4px; height:25px;" value="Go" /></span></form>
<div style="background-color: rgb(40, 40, 40); margin-top: -5px; width: 298px; height:75px">
<table border="0" style="border-top:1px #888 solid;"><tbody><tr></tr><tr><td><br />
<widget class="social">
<div id="footer-list-none">
<li><a class="rss" href="" rel="nofollow" title="Subscribe Via RSS">RSS</a></li>
<li><a href="" class="googleplus" title="Add Me On Google+">Google+</a></li>
<li><a class="facebook" href="" rel="nofollow" title="Find Us On Facebook">Facebook</a></li>
<li><a class="twitter" href="" rel="nofollow" title="Follow Us On Twitter">Twitter</a></li>
<li><a class="technorathi" href="" rel="nofollow" title="Add To Technorati">Technorathi</a></li>
<li><a class="google" href="" rel="nofollow" title="Add To Google">Google</a></li>
<li><a class="yahoo" href="" rel="nofollow" title="Add To Yahoo!">Yahoo</a></li>
<br />
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:right;"><a style="color:#D3D3D3;" href="">Get This Widget</a></p>
</widget><br /><br />
4.Save the widget and you are done!


Replace All the red bolded lines with the required services.If you want to remove any one of the icon you don't want to use just remove from the <li> and end with this tag </li>.
Happy Blogging Pals :)


  1. I would have been more than happy if you gave credit to my blog for the subscription widget Abdulsalam.

  2. Hi Abdulsalam i want people to subscribe my yahoogroup with this widget plz tell what to change in this code
    my yahoo group is



Don't Spam Please !