How To Add/Make Stylish Email Subscription Widgets For Blogger - SoftStudioInn

In this blog post, we will give you a Beautiful Email subscription box for free. It is very different when compared to all the other widgets available on the internet. That's why it looks almost a paid widget.

Email subscription widget is a subscription form for blogger sidebar provided by feedburner, this widget help your interested visitors to get latest updates from your blog via e-mail. People just enter their email address and then click on the "Subscribe" button and then, they would get all your blog's updates right on their email's Inbox. These widgets not only increase your traffic but also helps you to grow a loyal community of readers.

For this purpose, we need a subscription widget. But no one likes to give out their E-mail address to a spam-looking blog. That's why our subscription box must be good looking. In this blog post, we will give you a stylish email subscription widget for Blogger blogs.

Benefits Of Email Subscription Widget:

Email Subscription box is also considered as the best ways to promote a website. Subscription widget help you in creating an active community of readers and boost your blog traffic. More traffic = More AdSense earning. This widget help you to deliver latest posts to your customers instantaneously via Email, and the best part of this widget is that you will get social media links free in it which are going to help you to connect with your customers via social media channels.

#1 STYLISH EMAIL SUBSCRIPTION WIDGET FOR BLOGGER

This is the No 1 stylish email subscription widget for blogger. I hope it will increase and blog subscribers and pageviews too. Well, Do you like the widget, tell us in comments and don't forget to subscribe our blog and share this post.

<style>

/***** Email Subscription Widget For Blogger By Https://shoutersplanet.blogspot.com *****/

//@media(max-width:400px) {.sbox{width:109%!important;}}

//@media(max-width:1024px) and (min-width:400px) {.sbox{width:106.5%!important;}}

.sbox {background:#009abe;text-align:center;width:100%;}

.sbox span {color:#fff;font-family:roboto;font-size:27px;}

.sbox .small {font-size:18px;}

input.boxinput::placeholder {color:#fff;}

.sbox .hatespam {font-size:15px;}

.sbox .boxinput::placeholder {color:#fff;}

.sbox .boxinput {background:rgba(0,0,0,0.4);color:#fff;border:none;padding-top:13px;padding-bottom:13px;font-family:roboto;margin-bottom:10px;outline:none;transition:.3s;width:86%;text-align:center;border-radius:4px;}

.sbox .boxsubmit {box-shadow:0px 0px 31px 0px rgba(0,0,0,0.2);width:86%;text-align:center;padding-top:13px;padding-bottom:13px;background:#fff;outline:none;border:none;color:#009abe;font-family:roboto;cursor:pointer;border-radius:4px;}

.sbox .boxsubmit:active {background:rgba(0,0,0,0.6);color:#fff;}

.sbox {border-radius:8px!important;padding:0!important;border:none!important;}

.sbox .widget-content {margin:0!important;}

#sidebar-wrap .widget {overflow-x:hidden;}

.sbox {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%)!important;width:100%;}

.sbox .boxsubmit {box-shadow:none!important;border-radius:2px!important;color:#764ba2!important;}

.sbox .boxinput {border-radius:2px!important;}

</style>

<div class='sbox wow rubberBand'>

<center>

<br /><span class='icon'><img height='auto' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh75OUMiPvh8srboQxJLfcr_53OljtYUUdr5ZgxtvthRTPAHw0IE1x6PnIitmtbKE7Y5ObkDh5-vMBAbKnxXtOT37xJkuPX_XKyifVV5hyphenhyphenUPCgDclxqTDlBcWXHQ0DWWBBJUONxLaZFB4Q/s1600/email.png' width='150px'/></span><br/>

</center>

<span>Newsletter</span><br /><br />

<span class='small'>Join our newsletter to get secret tips directly in your inbox!</span><br /><br />

<center>

<form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('https://feedburner.google.com/fb/a/mailverify?uri=SoftStudioInn', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true' target='popupwindow'><input class='boxinput' name='EMAIL' placeholder='Your Email Address' type='email' required/>

<input class='boxsubmit' type='submit' value='Submit'/><input name='uri' type='hidden' value='SoftStudioInn'/>

<input name='loc' type='hidden' value='en_US'/></form><br />

<span class='hatespam'>*We Hate Spam!</span><br /><br />
<h2 style="height: 0px; text-align: center;">
<a href="https://softstudioinn.blogspot.com/" target="_blank"><span style="color: #6aa84f; font-size: small;">Created By: SoftStudioInn</span></a></h2>

</center></div>

#2 Stylish Email Subscription Widget For Blogger

This is the No 2 stylish email subscription widget for blogger. I hope it will increase and blog subscribers and pageviews too. Well, Do you like the widget, tell us in comments and don't forget to subscribe our blog and share this post.

<style type="text/css">
.hbzsub {
background-color: rgb(255, 255, 255);
width: 100%;
height: 100%;
border: 1px dashed #ddd;
}

.hbzsube {
color: rgb(255, 255, 255);
background-color: rgb(11, 172, 227);
padding: 10px 0;
text-align: center;
font: bold 15px "trebuchet MS", "Tahoma";
width: 100%;
}

.hbzemailform {
width: 235px;
margin: 10px auto;
}

#hbzemailbox {
background-color: #FFF;
color: #747474;
width: 130px;
border: 1px solid #D8D8D8;
padding: 7px;
height: 18px;
display: inline-block;
vertical-align: top;
box-shadow: inset 0px 0px 5px #c2c2c2;
box-sizing: content-box;
font-size: 13px;
}

#hbzemailbutton {
background-color: rgb(243, 93, 92);
border: 1px solid rgb(215, 84, 83);
color: rgb(255, 255, 255);
width: 85px;
font: bold 13px "trebuchet MS", "Tahoma";
padding: 7px;
text-align: center;
cursor: pointer;
display: inline-block;
height: 34px;
}

#hbzemailbutton:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}

.hbzsignup-form {
margin-top: 15px;
}

.hbzsocial-icons {
overflow: hidden;
text-align: center;
display: block;
margin: 20px auto;
}

.hbzsocial-icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}

.hbzsocial-icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 5px !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
display: none !important;
}

.hbzsocial-icons ul li a {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhATYk4I91TQl_e-Ki7ACHbWD11be45jCzfW6cSA04lUXA3qHFXg_58_FuqskbVpzilpGPbJakF95B40HVT1Gtsvl-YqZtN6LJ6ztX0dI8YBanb_9PKS-lb3hue2Fv0CCj6MPUEjQwRW2cy/s1600/sprite_32x32.png") no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: block;
height: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}

.hbzsocial-icons ul li a:hover {
background-color: #aeaeae !important;
}

.hbzsocial-icons ul li.social-facebook a {
background-position: -62px 1px;
background-color: #3b5998;
}

.hbzsocial-icons ul li.social-twitter a {
background-position: -254px 1px;
background-color: #00aced;
}

.hbzsocial-icons ul li.social-gplus a {
background-position: -95px 0px;
background-color: #dd4b39;
}

.hbzsocial-icons ul li.social-pinterest a {
background-position: -159px 1px;
background-color: #cb2027;
}

.hbzsocial-icons ul li.social-rss a {
background-position: -190px 0px;
background-color: #F87E12;
}
</style>
<div class="hbzsub">
<div class="hbzsube">Join Our Free Newsletter</div>
<div class='hbzsignup-form'>
<div class='hbzemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='[Your Blog uri]' /> <input name='loc' type='hidden' value='en_US' /> <input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email address' /> <input id='hbzemailbutton' title='' type='submit' value='Join Us' /> </form>
</div>
<div class="hbzsube">Sociliaze with Us</div>
<div class="hbzsocial-icons">
<ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>
<div style="width: 230px; margin: 0px auto;">
<div id="fb-root"></div>
<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.6";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-page" data-href="[Fb url]" data-width="230" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-hide-cover="true" data-show-facepile="true">
<div class="fb-xfbml-parse-ignore">
<blockquote cite="[Fb url]"><a href="[Fb url]">[Fb Page Name]</a></blockquote>
</div>
</div>
</div>
<h2 style="height: 0px; text-align: center;">
<a href="https://softstudioinn.blogspot.com/" target="_blank"><span style="color: #6aa84f; font-size: small;">Created By: SoftStudioInn</span></a></h2>

</div>
</div>

#3 STYLISH EMAIL SUBSCRIPTION WIDGET FOR BLOGGER

This is the No 3 stylish email subscription widget for blogger. I hope it will increase and blog subscribers and pageviews too. Well, Do you like the widget, tell us in comments and don't forget to subscribe our blog and share this post.

<style type="text/css">
.hbzsub {
background-color: #1E293B;
width: 100%;
height: 100%;
box-shadow: 0px 0px 10px rgb(30, 41, 59);
}

.hbzemailform {
width: 239px;
margin: 10px auto;
}

.hbzform-inner h4 {
color: rgb(255, 255, 255);
text-align: center;
padding: 10px;
font: bold 18px/40px "trebuchet MS","Tahoma";
}

#hbzemailbox {
background-color: #FFF;
border: 1px solid #FFF;
border-radius: 7px 0px 0px 7px;
height: 20px;
padding: 6px;
box-sizing: content-box;
}

#hbzemailbutton {
background-color: #F0553B;
border: 1px solid #F0553B;
color: #FFF;
height: 34px;
border-radius: 0px 7px 7px 0px;
margin-left: -4px;
font-weight: 600;
cursor: pointer;
}

#hbzemailbutton:hover {
background-color: #1E293B;
border: 1px solid #FFF;
box-shadow: 0 0 5px #ddd;
}

.hbzsocial-like {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoPUCDBFW96fOy8JWgXKHhHdZ5Waz8trfqEiMRk-_okksEcRsPMDKXEINy6cvqdeD7ZcRfnbA-2GHS5p44-ZJ646NlY8RMXy7QhwuDhwT8-ehyphenhyphenyruIbbH8Jmr_SuyRVrBJELXwnWWDthUD/s1600/Facebook-twitter-rectangle.png") no-repeat scroll center center / 250px 157px;
width: 250px;
height: 120px;
margin: 10px auto;
}

.hbzfb-likes {
margin-top: 90px;
margin-left: 20px;
position: absolute;
display: block;
box-shadow: 0px 0px 10px rgba(9, 42, 87, 0.73);
}

.hbztw-follow {
display: block;
margin-left: 152px;
position: absolute;
margin-top: 89px;
box-shadow: 0 0 10px rgba(2, 81, 173, 0.59);
height: 20px;
}
</style>

<div class="hbzsub">
<div class='hbzsignup-form'>
<div class='hbzform-inner'>
<h4>Get Posts In Your Inbox</h4>
</div>
<div class='hbzemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='[Your Blog uri]'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter Your Email Here...'/>
<input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
</div>
<table class='hbzsocial-like'>
<tbody>
<tr>
<td class='hbzfb-likes'>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>
</td>
<td class='hbztw-follow'>
<a href="[Twitter url]" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</td>
</tr>
</tbody>
</table>
</div>
<h2 style="height: 0px; text-align: center;">
<a href="https://softstudioinn.blogspot.com/" target="_blank"><span style="color: #6aa84f; font-size: small;">Created By: SoftStudioInn</span></a></h2>

#4 STYLISH EMAIL SUBSCRIPTION WIDGET FOR BLOGGER

<style type="text/css">
.hbzsub {
background-color: rgb(87, 98, 105);
width: 100%;
height: 100%;
padding: 5px;
box-shadow: 0px 0px 5px rgb(87, 98, 105);
}

.hbzform-inner {
text-align: center;
color: rgb(255, 255, 255);
font: bold 16px "trebuchet MS","Tahoma";
}

.hbzemailform {
width: 240px;
margin: 10px auto;
}

#hbzemailbox {
background-color: #798187;
color: #FFF;
width: 208px;
border: 1px solid #697780;
padding: 15px;
text-align: center;
height: 18px;
box-sizing: content-box;
}

#hbzemailbutton {
background-color: rgb(243, 93, 92);
border: 1px solid rgb(215, 84, 83);
color: rgb(255, 255, 255);
width: 240px;
font: bold 16px "trebuchet MS","Tahoma";
padding: 15px;
text-align: center;
height: 50px;
margin: 10px auto;
cursor: pointer;
}

#hbzemailbutton:hover {
background-color: #E64C4B;
border: 1px solid #BF4A49;
}

.hbzsignup-form {
margin-top: 15px;
}

.hbzsocial-icons {
overflow: hidden;
text-align: center;
border-bottom: 1px solid rgb(133, 133, 133);
width: 230px;
display: block;
margin: 20px auto;
}

.hbzsocial-icons ul {
margin: 0px auto !important;
text-align: center;
padding: 0px !important;
display: inline-block;
}

.hbzsocial-icons ul li {
background: transparent none repeat scroll 0% 0% !important;
border: medium none !important;
float: left;
list-style-type: none !important;
padding: 0px !important;
margin: 0px 2px !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhATYk4I91TQl_e-Ki7ACHbWD11be45jCzfW6cSA04lUXA3qHFXg_58_FuqskbVpzilpGPbJakF95B40HVT1Gtsvl-YqZtN6LJ6ztX0dI8YBanb_9PKS-lb3hue2Fv0CCj6MPUEjQwRW2cy/s1600/sprite_32x32.png") no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 34px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s;
width: 34px;
}

.hbzsocial-icons ul li.social-facebook a {
background-position: -62px 1px;
}

.hbzsocial-icons ul li.social-facebook a:hover {
background-color: #3b5998;
}

.hbzsocial-icons ul li.social-twitter a {
background-position: -254px 1px;
}

.hbzsocial-icons ul li.social-twitter a:hover {
background-color: #00aced;
}

.hbzsocial-icons ul li.social-gplus a {
background-position: -95px 0px;
}

.hbzsocial-icons ul li.social-gplus a:hover {
background-color: #dd4b39;
}

.hbzsocial-icons ul li.social-pinterest a {
background-position: -159px 1px;
}

.hbzsocial-icons ul li.social-pinterest a:hover {
background-color: #cb2027;
}

.hbzsocial-icons ul li.social-rss a {
background-position: -190px 0px;
}

.hbzsocial-icons ul li.social-rss a:hover {
background-color: #F87E12;
}

</style>

<div class="hbzsub">

<div class="hbzsocial-icons">
<ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>

<div class='hbzsignup-form'>
<div class='hbzform-inner'>
<h4>Subscribe to my Newsletter</h4>
</div>
<div class='hbzemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='[Your Blog uri]'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='hbzemailbox' name='email' required='' type='text' placeholder='Your Email'/>
<input id='hbzemailbutton' title='' type='submit' value='Subscribe'/>
</form>
</div>
</div>
</div>
<h2 style="height: 0px; text-align: center;">
<a href="https://softstudioinn.blogspot.com/" target="_blank"><span style="color: #6aa84f; font-size: small;">Created By: SoftStudioInn</span></a></h2>

#5 STYLISH EMAIL SUBSCRIPTION WIDGET FOR BLOGGER

<style type="text/css">
.hbzsignup-form {
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTAV1yRLw0gAyXB9kfABL6uuEtGr9hah-AwLycB_rRPQZZtl97rn4EyKBSJ8PBLGc9j7TU4u5AV_VOe-4Hnx0cJXN9E_opkVGf5mBW8FeyykHZ_TQJXbvHfgp9IrMSBFFs3KnjKXQ6kZA8/s1600/Email-bg.jpg") no-repeat scroll center center / 250px 150px;
height: 150px;
width: 250px;
margin: 10px auto 60px auto;
}

.hbzform-inner p {
text-align: center;
color: #fff;
padding: 10px;
font: bold 18px "trebuchet MS","Tahoma";
}

.hbzemailform {
margin: 120px auto 5px;
width: 215px;
}

#hbzemailbox {
background: #FEFEFE none repeat scroll 0% 0%;
border: medium none;
font: 12px/12px "HelveticaNeue",Helvetica,Arial,sans-serif;
margin-right: 5px;
box-shadow: 0px 0px 4px rgb(207, 207, 207) inset, 1px 1px 1px rgb(186, 186, 186);
padding: 7px;
box-sizing: content-box;
height: 12px;
vertical-align: top;
display: inline-block;
}
#hbzemailbutton {
background: transparent linear-gradient(to bottom, rgb(202, 48, 40) 0%, rgb(235, 88, 78) 100%) repeat scroll 0% 0%;
box-shadow: 0px 0px 2px rgb(182, 37, 32) inset;
border: medium none;
color: #FFF;
cursor: pointer;
font: 13px/13px "HelveticaNeue",Helvetica,Arial,sans-serif;
padding: 6px;
border-radius: 5px;
height: 27px;
display: inline-block;
}

#hbzemailbutton:hover {
background: transparent linear-gradient(to bottom, #CA3028 0%, #B72420 100%) repeat scroll 0% 0%;
}

.hbzsocial-icons {
margin: 20px 0 0;
overflow: hidden;
display: block;
text-align: center;
}

.hbzsocial-icons ul {
display: inline-block;
margin: 0 auto !important;
text-align: center;
padding: 0px
}

.hbzsocial-icons ul li {
background: transparent !important;
border: none !important;
float: left;
list-style-type: none !important;
margin: 0 4px 10px !important;
padding: 0 !important;
}

.hbzsocial-icons ul li::before,
.hbzsocial-icons ul li::after {
display: none !important;
}

.hbzsocial-icons ul li a, .hbzsocial-icons ul li a:hover {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhATYk4I91TQl_e-Ki7ACHbWD11be45jCzfW6cSA04lUXA3qHFXg_58_FuqskbVpzilpGPbJakF95B40HVT1Gtsvl-YqZtN6LJ6ztX0dI8YBanb_9PKS-lb3hue2Fv0CCj6MPUEjQwRW2cy/s1600/sprite_32x32.png") no-repeat scroll 0 0;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
display: block;
height: 38px;
overflow: hidden;
text-indent: -999px;
transition: all 0.25s linear 0s; width: 38px;
}

.hbzsocial-icons ul li.social-facebook a {
background-color: #3b5998;
background-position: -60px 3px;
}

.hbzsocial-icons ul li.social-twitter a {
background-color: #00aced;
background-position: -253px 3px;
}

.hbzsocial-icons ul li.social-gplus a {
background-color: #dd4b39;
background-position: -93px 3px;
}

.hbzsocial-icons ul li.social-pinterest a {
background-color: #cb2027;
background-position: -157px 3px;
}

.hbzsocial-icons ul li.social-rss a {
background-color: #F87E12;
background-position: -189px 3px;
}
.hbzsocial-icons ul li a:hover {
background-color: #333;
}

.hbzsocial-like {
display: block;
text-align: center;
}

.hbzsocial-like tbody, .hbzsocial-like tbody tr {
display: block;
}

.hbzfb-likes {
display: inline-block;
padding-bottom: 15px;
margin-right: 5px;
}

.hbztw-follow {
display: inline
}

</style>

<div>
<div class='hbzsignup-form'>
<div class='hbzform-inner'>
<p>Sign Up for Email Updates</p>
</div>
<div class='hbzemailform'>
<form action='http://feedburner.google.com/fb/a/mailverify' id='subscribe' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=[Your Blog uri]', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='[Your Blog uri]'/>
<input name='loc' type='hidden' value='en_US'/>
<input id='hbzemailbox' name='email' required='' type='text' placeholder='Enter your email...'/>
<input id='hbzemailbutton' title='' type='submit' value='Sign up'/>
</form>
</div>
</div>

<div class="hbzsocial-icons">
<ul>
<li class="social-facebook"><a href="[Fb url]" target="_blank" title="Facebook">Facebook</a></li>
<li class="social-twitter"><a href="[Twitter url]" target="_blank" title="Twitter">Twitter</a></li>
<li class="social-gplus"><a href="[Google+ url]" target="_blank" title="Google+">Google+</a></li>
<li class="social-pinterest"><a href="[Pinterest url]" target="_blank" title="Pinterest">Pinterest</a></li>
<li class="social-rss"><a href="[RSS url]" target="_blank" title="RSS">RSS</a></li>
</ul>
</div>

<table class='hbzsocial-like'>
<tbody>
<tr>
<td class='hbzfb-likes'>
<div id="fb-root">
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="fb-like" data-href="[Fb url]" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false">
</div>
</td>
<td class='hbztw-follow'>
<a href="[Twitter url]" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false" data-dnt="true">Follow @[Twitter Username]</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</td>
</tr>
<tbody>
</table>
</div>
<h2 style="height: 0px; text-align: center;">
<a href="https://softstudioinn.blogspot.com/" target="_blank"><span style="color: #6aa84f; font-size: small;">Created By: SoftStudioInn</span></a></h2>

Steps: How To Add A Stylish Subscription Widget To Blogger

Step 1. Log in to your Blogger account, then go to Layout > click on the 'Add a gadget' link on the left side.

Step 2. Choose HTML/JavaScript from the pop-up window > paste the code of the subscription widget inside the empty box.

Step 3. Configuration of Subscription Box.

Replace [Your Blog uri] with Your blog Uri which is basically your Feed title. You can get it by visiting http://feedburner.google.com and then navigate to Publicize > Email Subscription and find your uri value in given box. For eg: http://feedburner.google.com/fb/a/mailverify?uri=SoftStudioInn and <input name='uri' type='hidden' value='SoftStudioInn'/>
Replace [Fb url] with your Facebook page URL. For eg: https://www.facebook.com/SoftStudioInn
Replace [Twitter url] with your twitter page URL. For eg: http://www.twitter.com/SoftStudioInn
Replace [Google+ url] with your google+ page or account URL. For eg: https://plus.google.com/xxxxxxxxxxxxxxxxx
Replace [RSS url] with your RSS URL. For eg: http://feeds.feedburner.com/SoftStudioInn
Replace [Pinterest url] with your pinterest URL.
Replace [Twitter Username] with your twitter account username. For eg : @SoftStudioInn
Replace [Fb Page Name] with your Facebook Page Name. For eg : SoftStudioInn