Email Subscription Box with Social Buttons for Blogger

We have recently shared a wordpress like subscription box with all our readers. We have also shared a guide on how to guide subscription box below post and today we are here with a guide to add Email Subscription Box with Social Buttons. By this subscription box with social media buttons you can easily improve social media followers for your blog. If you also want to improve social media presence of your blog then this Email Subscription box will help you to gain more followers. This will help you to make your blog popular.

Read: Interlinking and Its Effective Role in Blogging

How to Add Email Subscription Box with Social Buttons to Blogger:

Follow the below given steps to add Subscription box to blogger blog.

1. Log in to your Blogger dashboard.

2. Go to Layout and then Click on "Add Gadget" option. Now, choose "Add HTML/Javascript Widget".

3. Now, copy the code given below and paste it in HTML/Javascript widget.

<div class="widget-content">
<style>
#socialwidget {
border: 1px solid #BDBABA;
width: 290px;
margin-left: -7px;
}
.TZ-social{
padding: 10px 10px 10px 10px;
border-bottom: 1px solid #EBE2E2;
}
.TZ-social img:hover{opacity:0.8}
.googleplus {
background: #ffffff;
border-top: 1px solid white;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
color: #000;
padding: 9px 11px;
ine-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}

.TZ {
background: #ffffff;
border-top: 1px solid white;
font-size: 12px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
}
.TZ span {
color: #000;
font-size: 11px;
position: absolute;
margin: -12px 100px;
width: 310px;
}
#widgetbox .author-credit a {
font-size: 10px;
font-size: 10px;letter-spacing: 1px;
color: #1E598E;
text-decoration: none;
}
.email-subscribe-emailbox {
padding: 5px 13px;
font-family: "Arial","Helvetica",sans-serif;
border-top: 1px solid silver;
border-image: initial;
height: 42px;
background: #E6E6E6;
width:none;
}
.email-subscribe-emailbox form {width:100%;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;}
.email-subscribe-emailbox input.emailu {border: 1px solid #BEBEBE;margin-left: -5px;float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;font-weight: bold;}
.email-subscribe-emailbox input.emailu:focus {color: #333;}
.email-subscribe-emailbox input.submitu {
-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 6px 10px;
font-weight: bold;
font-size: 12px;

margin-bottom: 6px;
float: right;
cursor: pointer;
}
.email-subscribe-emailbox input.submitu:hover {text-decoration: none;}
.TZDefault {border: 0px solid #dedede;text-shadow: #d08d00 1px 1px 0;background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffca00),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffca00 0,#ff9b00 100%);background: linear-gradient(center top,#ffca00 0,#ff9b00 100%);}
.TZDefault:hover {background-color: #ff9b00;background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#ffe480),color-stop(1,#ff9b00));background: -webkit-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -moz-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -o-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: -ms-linear-gradient(center top,#ffe480 0,#ff9b00 100%);background: linear-gradient(center top,#ffe480 0,#ff9b00 100%);}
</style>
<div id="socialwidget">

<div class="TZ-social">

<center>
<div style=';margin-top:5px; border-bottom: 1px solid #EBE2E2;'>
<a href="http://feeds.feedburner.com/Smartbloggertricks"><img src="http://feeds.feedburner.com/~fc/Smartbloggertricks?bg=99CCFF&fg=444444&anim=1" alt="Fellow Readers" height="26" width="88" /></a> </div>
</center>
<center>
<div style=';margin-top:5px; border-bottom: 1px solid #EBE2E2;'>
<a style="margin-right: 10px;" href="http://facebook.com/https://www.facebook.com/smartbloggertricks" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkrn_QiiLoJpDTP0NvpAd7oqGKE1ad1KLgr60D9heLh7jnAv17-5BUYQOEpjER3RdHz_03YEAyJgToar2FkWFusCAy7lpTC78byHzQQ5KROwwbmVyPuvCwz9YQNrVCMFksI-mgRQ10To/s1600/facebook.png" title="Facebook" /></a>
<a style="margin-right: 10px;" href="http://twitter.com/TechSBT id" target="_blank" rel="nofollow">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGyNPcUypyjzHok7KKnxpi0_zz70VCxKxCrFomqBHDMSrSKyrYqOoJBeGiS2R8dO552i6uQaNaPc7n3lZ8mT1H5H5O5JphM_f3KaKfBQoj_W8dwioOtA3ODSroArUG84gzfvjK5EE0tYo/s1600/twitter.png" title="Twitter" /></a>
<a style="margin-right: 10px;" rel="me" href="Your google plus profile link" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrfd7pywS3Pcr69toDodVZrSlu96Y58Ew_JcqBcRZHz7ycWVkCm5uL-eO82G0An-FIPa54OyDETLZGaiuoPpVvX_IEkDnJnL0J9gYR02LMhHPjSXy6u7nPSUtLaxRgzEcEX7T1zGmTPNw/s1600/gplus.png" title="Google Plus" /></a>
<a style="margin-right: 10px;" href="Your pinterest link" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkmPLTZei0tOpxCW6LTVFCi4IAawHuG_PBakA4uWRJSnpblgx6dOG7rwHy6Bv_vrW9E5X-d_CPkYfD8okZljWysRvzAnP0fuxugi-ZVNjZhdkw0iRSgXGZwjvjcw_IvTdJ2ITsHLosCmI/s1600/pinterest.png" title="Pinterest" /></a>
<a style="margin-right: 10px;" href="
http://feeds.feedburner.com/Smartbloggertricks" target="_blank" rel="nofollow"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHliU3m4zd68eRwKn4oxKH-Iyv4R6t2kY-MuneXTWenJfwVVUz-XVitQk5l6Yy2JrRL_w51WsEf7Q2X0_UwbpBXMT1eSHG1lD3MxebJ89tfLYRjipBhNjxMsQYp9w65D-x5cqHDqclceM/s1600/rss.png" title="RSS Feed" /></a>
</div></center>
</div>

<div class="email-subscribe-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=Bloggerbloggingtricks', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tbody><tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text" />
</td>
<td width="70px">
<input class="submitu TZDefault" value="Subscribe" type="submit" />
</td>
</tr>
</tbody></table>
<input name="uri" value="Bloggerbloggingtricks" type="hidden" />
<input name="loc" value="en_US" type="hidden" />
</form>
</div>

</div>
</div>

4. Now, replace SBT social profiles with your Blog's social profiles.

5. Save the Gadget.

That's it. You have successfully added the Email subscription box to Blogger blog.