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,
<style>
.sBlack {
background: none repeat scroll 0 0 #282828;
height: 95px;
padding-bottom: 10px;
}
.sBlack .subscribeTop .mcLeft {
background: url(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaKvj6t3fmMs5uu142DDGdgrVjAh645S8L7gRrzacXfrWPmHAKYIMvF86NPg30m_aCFbiTbfSZAeZ27Vt26zjcy14RUOs6YR1EJfxRL9I2iiPz2V5-NS-d0imB3EJ8LGQO63WwiBZcZ0/s1600/CSS_Sprite-technetsavvy.png”) 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(“https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaKvj6t3fmMs5uu142DDGdgrVjAh645S8L7gRrzacXfrWPmHAKYIMvF86NPg30m_aCFbiTbfSZAeZ27Vt26zjcy14RUOs6YR1EJfxRL9I2iiPz2V5-NS-d0imB3EJ8LGQO63WwiBZcZ0/s1600/CSS_Sprite-technetsavvy.png”) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlaKvj6t3fmMs5uu142DDGdgrVjAh645S8L7gRrzacXfrWPmHAKYIMvF86NPg30m_aCFbiTbfSZAeZ27Vt26zjcy14RUOs6YR1EJfxRL9I2iiPz2V5-NS-d0imB3EJ8LGQO63WwiBZcZ0/s1600/CSS_Sprite-technetsavvy.png) no-repeat; display: block; height: 35px; text-indent: -999em; width: 32px; }
.social li a.rss { background-position: 0 -263px; }
.social li a.google+ { 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 a.google { background-position:0 -136px; }
.social li a.yahoo { 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; }
</style>
<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=”window.open(‘http://feedburner.google.com/fb/a/mailverify?uri=NewTricksNTips‘, ‘popupwindow’, ‘scrollbars=yes,width=550,height=520′);return true” method=”post” class=”getform” action=”http://feedburner.google.com/fb/a/mailverify”><input type=”text” style=”width:128px; height:16px;” name=”email” onblur=”if (this.value == "") {this.value = "Enter your email";}” onfocus=”if (this.value == "Enter your email") {this.value = ""}” 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>
</div>
</div>
<center>
<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=”http://feeds.feedburner.com/NewTricksNTips” rel=”nofollow” title=”Subscribe Via RSS”>RSS</a></li>
<li><a href=”https://plus.google.com/105434034959210389915?rel=author” class=”googleplus” title=”Add Me On Google+”>Google+</a></li>
<li><a class=”facebook” href=”http://www.facebook.com/pages/NewTricksNTips/303547589685015” rel=”nofollow” title=”Find Us On Facebook”>Facebook</a></li>
<li><a class=”twitter” href=”http://twitter.com/NewTricksNTips” rel=”nofollow” title=”Follow Us On Twitter”>Twitter</a></li>
<li><a class=”technorathi” href=”http://technorati.com/faves?sub=addfavbtn&add=http://www.sharethetricks.blogspot.com” rel=”nofollow” title=”Add To Technorati”>Technorathi</a></li>
<li><a class=”google” href=”http://fusion.google.com/add?source=atgs&feedurl=http%3A//feeds.feedburner.com/NewTricksNTips” rel=”nofollow” title=”Add To Google”>Google</a></li>
<li><a class=”yahoo” href=”http://add.my.yahoo.com/rss?url=http://feeds.feedburner.com/NewTricksNTips” 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=”http://mybloggertricksntips.blogspot.com/”>Get This Widget</a></p>
</div>
</widget><br /><br />
</td></tr></tbody></table></div></center>
4.Save the widget and you are done!
Customizations:
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
