Stylish Social Subscription Widgets for Blogger

A blog without subscription box looks empty. Subscription box is a best way to give your readers an option to get your contents in their mail box. So, today we are going to share some unique, simple yet eye-catching and fast loading subscription widgets with you.

1. Stylish Mini Subscription Widget

Live Demo

<style>#socialwidget {border: 1px solid #ebebeb;width: 300px;}.TZ-social{padding: 10px 10px 10px 10px;border-bottom: 1px solid #ebebeb;}.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;}.googleplus span {color: #000;font-size: 11px;position: absolute;margin: 9px 70px;width: 310px;}.g-plusone {float: left;}.twitter {background: #ffffff;border-bottom: 1px solid #ebebeb;padding: 10px;}.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 10px;font-family: "Arial","Helvetica",sans-serif;border-top: 0;border-image: initial;height: 42px;background: #EFF8FB;width: 280px;}.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 {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}.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: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}.email-subscribe-emailbox input.submitu:hover {text-decoration: none;}.TZDefault {border: 1px 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><a style="margin-right: 10px;" href="http://facebook.com/blogsmasala" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcUDru543o7HU3Qcz3_hQf_aoq8l6_yrNfqUCWxqylQ0yxOKqRHdHhaJJ_cNfxbnvDAOXOojUClF8WR9gqEo9RqWL0MDiBQlWILWVVKJZpb-DyiImww8P6BF1NgsvHjN8JV_ly7nx5kVY/s1600/facebook.png" title='Facebook'/></a><a style="margin-right: 10px;" href="http://twitter.com/mybloggingtips1" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLd5Ac3RKoT7SGDsYrc3OKsjrcOoQ3zC79uyAUxEAPRXFxD8zuQnsW6FptJW9mcjWWotn8XGFOHVxWFN0rQP8lQSp5zTzu4OdmfxdNLGhigX6Dq5vuXdSRvkp8oPQoi7wtEYJ6IuhnYDs/s1600/twitter.png" title='Twitter'/></a><a style="margin-right: 10px;" rel="me" href="https://plus.google.com/115690612975231043872" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjl3QeRLRiKeqWx9gdAb3DOU1y72hYaRrUMqYgfX2FZ-7sqsj7_bhsYk4FDQntesdfpDuMVUuLRfSUj-XIRNZTXFsC5MKmG61TD5_h0ackV_SyhDRhMuxe0ufC1l7Vv5qnfhaJ2AUprlFY/s1600/gplus.png" title='Google Plus'/></a><a style="margin-right: 10px;" href="http://pinterest.com/mybloggingtips/" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjObubTkTWBxy7asT_kpHUNzBFhJ-sbFoviqEtPY3LQDB8LVy7SVWf2flSpD1gQyjcJ6mKtEkQ74HpryiXM42EHfr1rsdYQNQp28NpydQBjqfIaJewNWkfZIMSLcDGwyrlWxQc9b9V3pKg/s1600/pinterest.png" title='Pinterest'/></a><a style="margin-right: 10px;" href="http://feeds.feedburner.com/mybloggingtips" target="_blank" rel="nofollow"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkKGePJeI3FYB6cGkk1XYBsja49zzkjIWCpHDLuOK6jkYjaOndYhDf4gFGDi64XMeEITbF_l_qe_tirdXpcqRfH09J88UhQeqx3JbW6cWGeT21igvwwHKTCS8ws1BnSp9BsJ2vqIK79rY/s1600/rss.png" title='RSS Feed'/></a></center></div><div class="googleplus"><span><font><font>Recommend Us On Google </font></font></span><g:plusone size="medium" href="http://www.mybloggingtips.com/"></g:plusone><script type="text/javascript">(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();</script></div><div class="TZ"><iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fblogsmasala&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font=verdana&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowtransparency="true"></iframe><span>Like Us On Facebook</span></div><div class="twitter"><iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1335513764.html#_=1335528101755&id=twitter-widget-0&lang=en&screen_name=mybloggingtips1&show_count=true&show_screen_name=true&size=m" class="twitter-follow-button" style="width: 244px; height: 20px; " title="Twitter Follow Button"></iframe><script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script></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=mybloggingtips', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="70px">
<input class="submitu TZDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
</form>
</div>
<div id="widgetbox" style="background: #EBEBEB;border-top: 1px solid #ddd;padding: 1px 8px 1px 3px;text-align: right;border-image: initial;font-size:10px;font-family: "arial","helvetica",sans-serif;">
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.the-area51.com/2012/10/how-to-add-multi-social-subscription.html" target="_blank">Get this</a></span>
</div>
</div>

You might like to read: Best Metro Style Widgets for Blogger

2. Stylish Subscription Widget With Google+ and Pinterest

Live Demo

<style type="text/css">
/*<!CDATA[*/
#bwg-mashable{width:300px;margin:auto;padding:0;}
.bwg-googleplus {margin-bottom:50px; height: 57px;}
.bwg-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.bwg-gplusone {background-color: #f5fcfe;border: 1px solid #d8e6eb;border-top: 1px solid white;font-size: .87em;color: black;padding: 9px 0 0 11px;line-height: 24px;height:30px;}
.bwg-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.bwg-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.bwg-twitter a.twitter-follow-button {display: block;}
.bwg-twitter iframe {margin: 9px 11px;}
.author-credit a {font-size: 10px;font-size: 10px;letter-spacing: 1px;color: #1E598E;text-decoration: none;}
.pterest {
background: #EFF5FB;
border-bottom: 1px solid #ebebeb;
font-size: 8px;
color: #000;
padding: 9px 11px;
line-height: 1px;
font-family: Verdana, Geneva, sans-serif;
border-top: 1px solid #ddd;
}
.bwg-sociallinks {background-color: #d8e6eb;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 10px 11px;overflow: hidden;}
.bwg-sociallinks a {text-shadow: 1px 1px white;}
.bwg-sociallinks .bwg-social {list-style: none;overflow: hidden;margin: 0 !important;padding: 0 !important;}
.bwg-sociallinks .bwg-social li {border:0 none !important;float: left;line-height: 1;padding: 2px 0 4px 20px !important;margin-bottom: 3px;width: 70px;background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgn3-GZ7CIxBKCKm_vDOU9Edxbk_hQsfo06YMcCWuU1DNrUQQkaWRpUQsqyiKtP7mlkJ397c7ZYiMGuveclhwJ0tY6v1gTRMFYIRv6ZjS0_CyOv8uqXIIHY0JFecQGnGTQ6FLNOsMRx3jGL/s1600/w2b_socialsprite.png) no-repeat;font-size: 12px;}
.bwg-sociallinks .bwg-social li a {display: block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
.bwg-sociallinks .bwg-social li a:hover {text-decoration: underline;}
.bwg-sociallinks .bwg-social li.facebook {background-position: 0 -450px !important;}
.bwg-sociallinks .bwg-social li.twitter {background-position: 0 -150px !important;}
.bwg-sociallinks .bwg-social li.youtube {background-position: 0 -90px !important;}
.bwg-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.bwg-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;}
.bwg-emailbox input.emailu {float:left;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;box-sizing: border-box;border: 0;color: #999;padding: 7px 10px 8px;width: 100%;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;font-size: 13px;}
.bwg-emailbox input.emailu:focus {color: #333;}
.bwg-emailbox input.submitu {-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;color: white;padding: 7px 14px;font-weight: bold;font-size: 12px;float: right;cursor: pointer;}
.bwg-emailbox input.submitu:hover {text-decoration: none;}
.bwgOrange{border:1px solid #E08121 ;text-shadow:1px 1px 0 #E08121;background: #f79d4a;background: -moz-linear-gradient(top, #f79d4a 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f79d4a), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -o-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f79d4a 0%,#ef871f 100%);background: linear-gradient(top, #f79d4a 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f79d4a', endColorstr='#ef871f',GradientType=0 );}
.bwgOrange:hover{background: #f4b67c;background: -moz-linear-gradient(top, #f4b67c 0%, #ef871f 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4b67c), color-stop(100%,#ef871f));background: -webkit-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -o-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: -ms-linear-gradient(top, #f4b67c 0%,#ef871f 100%);background: linear-gradient(top, #f4b67c 0%,#ef871f 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4b67c', endColorstr='#ef871f',GradientType=0 );}.bwg-moresubs {background: none repeat scroll 0 0 #EBEBEB;border-style: solid;border-width: 1px;border-color: #fff #ccc #ccc;padding: 3px 8px 3px 3px;text-align: right;font-size: 7px;letter-spacing: 1px;}
.bwg-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
<div id="bwg-mashable">
<div class="bwg-googleplus">
<script type="text/javascript">
/*<![CDATA[*/
window.___gcfg = {lang: 'en'};
(function(){
var po = document.createElement("script");
po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(po, s);
})();
/*]]>*/
</script>

<div class="g-plus" data-href="https://plus.google.com/115690612975231043872" data-width="300" data-height="auto" data-theme="light"></div>
</div>

<div class="bwg-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fblogsmasala&send=false&layout=standard&width=280&show_faces=true&action=like&colorscheme=light&font=arial&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:66px;" allowtransparency="true"></iframe>
</div>
<div class="bwg-gplusone">
<script type="text/javascript">/*<![CDATA[*/
(function() {
var po = document.createElement("script"); po.type = "text/javascript"; po.async = true;
po.src = "https://apis.google.com/js/plusone.js";
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(po, s);
})();/*]]>*/
</script>

<div class="g-plusone" data-size="medium" data-href="http://www.mybloggingtips.com/"></div>
<span>Recommend on Google</span>
</div>

<div class="bwg-twitter">
<a href="https://twitter.com/mybloggingtips1" class="twitter-follow-button" data-show-count="true">Follow @mybloggingtips</a>
<script type="text/javascript">/*<![CDATA[*/!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");/*]]>*/</script>
</div>

<div class="pterest">
<a href="http://pinterest.com/mybloggingtips/"><img src="http://passets-cdn.pinterest.com/images/about/buttons/follow-me-on-pinterest-button.png" width="169" height="28" alt="Follow Me on Pinterest"/></a>
</div>

<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggingtips', 'popupwindow', 'scrollbars=yes,width=550,height=520'); return true" target="popupwindow">
<table width="100%">
<tr>
<td>
<input class="emailu" name="email" placeholder="Enter your email" type="text"/>
</td>
<td width="70px">
<input class="submitu TZDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
</form>
<span class="author-credit" style="font-family: Arial, Helvetica, sans-serif;"><a href="http://www.the-area51.com/2012/10/how-to-add-multi-social-subscription.html" target="_blank">Get this</a></span> </div>

Recommended Widgets:

3. Simple Style Subscription Box

Live Demo

<style>
/* social media widget by www.Dynamictrick.in ------------------- */
.sidebar .social_media .social_media_icon {}
.sidebar .social_media .twitter_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat 0 0 transparent;}
.sidebar .social_media .facebook_icon ,.content .social_media .facebook_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -80px 0 transparent;}
.sidebar .social_media .gplus_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -160px 0 transparent;}
.sidebar .social_media .rss_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -240px 0 transparent;}

.content .social_media .social_media_icon {}
.content .social_media .twitter_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat 0 0 transparent;}
.content .social_media .facebook_icon{background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -80px 0 transparent;}
.content .social_media .gplus_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -160px 0 transparent;}
.content .social_media .rss_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -240px 0 transparent;}
.sidebar .social_media .twitter_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat 0 -77px transparent;}
.sidebar .social_media .facebook_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -80px -77px transparent;}
.sidebar .social_media .gplus_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -160px -77px transparent;}
.sidebar .social_media .rss_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -240px -77px transparent;}
.content .social_media .twitter_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat 0 -77px transparent;}
.content .social_media .facebook_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -80px -77px transparent;}
.content .social_media .gplus_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -160px -77px transparent;}
.content .social_media .rss_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media.png) no-repeat -240px -77px transparent;}
/* social media for footer ------------------- */
.bottom .social_media .social_media_icon {}
.bottom .social_media .twitter_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat 0 0 transparent;}
.bottom .social_media .twitter_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat 0 bottom transparent;}
.bottom .social_media .facebook_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat -61px 0 transparent;}
.bottom .social_media .facebook_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat -61px bottom transparent;}
.bottom .social_media .gplus_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat -122px 0 transparent;}
.bottom .social_media .gplus_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat -122px bottom transparent;}
.bottom .social_media .rss_icon {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat -182px 0 transparent;}
.bottom .social_media .rss_icon:hover {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/social-media-footer.png) no-repeat -182px bottom transparent;}
/*newsletter for sidebar*/
.newsletter { background:#FFFFFF url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/newsletter-bottom1.jpg) 0 bottom repeat-x; border-bottom:none;
border-left: 1px solid #E6E6E6;
border-right: 1px solid #E6E6E6;
}
.newsletter h3{background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/newsletter-top.png) top left repeat-x; color:#FF0001; border-top:none;}
.sidebar .newsletter p {color:#444444; font-size: 14px; margin-top: 10px;
}
.sidebar .newsletter_form .btn_submit, .bottom .newsletter_form .btn_submit:hover {
background:url("http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/newsletter-go.png") no-repeat scroll 50% 50% !important;
width:38px;
}
/*newsletter for footer*/
.bottom .newsletter {background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/newsletter-bottom.png) 0 bottom repeat-x #fbf9f9; border-bottom:none; }
.bottom .newsletter h3{background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/newsletter-top.png) top left repeat-x; color:#FF0000;}
.bottom .newsletter p {color:#444444;}
.bottom .newsletter_form .btn_submit, .bottom .newsletter_form .btn_submit:hover {
background:url("http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/newsletter-go.png") no-repeat scroll 50% 50%;
border-left:1px solid #ccc !important;
}
/* social media ------------------- */
.sidebar .social_media { overflow:hidden; }
.sidebar .social_media ul { padding:0; }
.sidebar .social_media ul li { margin:0 6px 0 0!important; float:left; padding:0; }
.sidebar .social_media .social_media_icon {width:66px; height:66px; display:block;}
.content .social_media { overflow:hidden; }
.content .social_media ul { padding:0; }
.content .social_media ul li { margin:0 6px 0 0!important; float:left; padding:0; }
.content .social_media .social_media_icon {width:66px; height:66px; display:block;}
.bottom .social_media { overflow:hidden; margin-bottom:10px; }
.bottom .social_media ul li { margin:0 0 0 5px; float:left; padding:0; }
.bottom .social_media .social_media_icon {width:54px; height:53px; display:block;}
.twitter-share-button {float:left; display:inline-block; margin-bottom: 35px;}
.flike {display:inline-block;margin-bottom: 35px; width:315px; }
.authorbox {float:left;margin: 0; width:auto; }
.authorbox .author-avatar{float:left; padding: 20px 0 20px 20px; background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/dot-line.jpg) repeat-x left 52px; }
.authorbox .author-desc{float:left; width:80%; padding: 15px 20px 20px 18px; background:url(http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/dot-line.jpg) repeat-x left 52px; }
.authorbox h4 {font-size: 17px;
margin-bottom: 15px;
padding: 0 0 15px;}
.authorbox p {font-size:13px; line-height:1.5em;}
.i_mail b_sendtofriend {display:inline-block;}
/* subscribe ------------------------*/
/* newsletter ------------------------*/
.newsletter {
margin-bottom:30px;
height:auto !important;
}
.newsletter h3 span.title { float:left; }
.newsletter h3 { display: block;
padding: 12px 16px 10px;
position: relative;
border-bottom:1px solid #EAEAEA;}
.newsletter p { margin:0; padding:0 15px; line-height:22px; clear:both; font-size:14px;}
.newsletter_form_div {
margin:18px 14px 40px;
}
.newsletter_form {
overflow:hidden;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-o-border-radius:3px;
border-radius:3px;
border:1px solid #ccc;
background:#F6F7F9;
margin:0;
padding:0 ;
}
.newsletter .newsletter_left {
float: left;
width: 80%;
}
.newsletter .newsletter_right {
float: right;
width: auto;
height:auto;
}
.newsletter .field {
border-radius: 0 0 0 0;
border:none;
font-size: 13px;
height: 37px;
color:#444;
line-height:35px;
margin:0;
padding: 0 11px;
width:100%;
background:#f6f7f9;
}
.bottom .newsletter .field {
width:auto;
}
.newsletter_form .btn_submit {
border-radius: 0 0 0 0;
border:none;
cursor: pointer;
font-size: 13px;
font-weight: bold;
padding: 0;
height:37px;
width:37px;
text-indent: -9009px;
}
.newsletter .i_rss { float:right; }
.newsletter_form .btn_submit,
.newsletter_form .btn_submit:hover {
border:none; color:#fff;
}
/*--- 6. Other Elements---*/
</style>
<center>
<div class="widget social_media">
<ul>

<li><a class="social_media_icon twitter_icon" href="https://twitter.com/mybloggingtips1" ></a> </li>

<li> <a class="social_media_icon facebook_icon" href="http://www.facebook.com/blogsmasala" ></a> </li>

<li> <a class="social_media_icon gplus_icon" href="https://plus.google.com/115690612975231043872" ></a> </li>

<li> <a class="social_media_icon rss_icon" href="http://feedburner.google.com/fb/a/mailverify?uri=mybloggingtips" ></a> </li>
</ul>
</div>  </center>
<div class="widget newsletter clear">
<h3>
<a href="http://feeds2.feedburner.com/mybloggingtips" >
<img src="http://dl.dropbox.com/u/72954964/Dynamic%20trick/social%20widget/i_rss.png" alt="" class="i_rss" /> </a> </h3>

<p>Stay updated with all our latest news please enter your e-mail address here</p>
<div class="newsletter_form_div">
<form class="newsletter_form " action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=mybloggingtips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return false;">
<div class="newsletter_left">
<input type="text" class="field" value="Enter Email here" onfocus="if (this.value == 'Enter Email here') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Email here';}" name="email" />
</div>
<div class="newsletter_right">
<input type="hidden" value="mybloggingtips" name="uri"/><input type="hidden" name="loc" value="en_US" />
<input class="btn_submit" type="submit" name="submit" value="" />
</div>
<div style="clear:both;"></div>
</form>
</div>
</div>

Recommended: Stylish Mini Icons Social Media Widget for Blogger

4. Elegant Look & Feel Subscription Box

Live Demo

<style>
.subscribebtrix {
background: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#d3dde3));
background: -moz-linear-gradient(top, #f5f5f5, #d3dde3);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F5F5F5, endColorStr=#d3dde3);
display:inline-block; /* IE is so silly */
border: 0px solid #000000;
border-radius: 5px;
padding: 0px 10px 10px 10px;
width: 310px;
}
.subscribebtrix img {
border: none;
}
.tbimailbox {
width: 270px;
color: #666;
font: 16px 'Trebuchet Ms', Sans-Serif;
padding: 10px 15px;
border: 1px solid #D3D3D3;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-box-shadow: 1px 1px 1px 1px rgba(255, 172, 84, 0.4) inset;
-webkit-box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4) inset;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
.tbimailbox:hover {
-webkit-box-shadow: none;
box-shadow: none;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.button {
width: 300px;
border-top: 1px solid #96d1f8;
background: #0571e6;
background: -webkit-gradient(linear, left top, left bottom, from(#123d60), to(#0571e6));
background: -webkit-linear-gradient(top, #123d60, #0571e6);
background: -moz-linear-gradient(top, #123d60, #0571e6);
background: -ms-linear-gradient(top, #123d60, #0571e6);
background: -o-linear-gradient(top, #123d60, #0571e6);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#123d60, endColorStr=#0572e6);
display:inline-block; /* IE is so silly */
padding: 10px 20px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: white;
font-size: 16px;
font-family: "Verdana", sans-serif;
font-weight: bold;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
background: #123d60;
color: #ccc;
}
.button:active {
border-top-color: #123d60;
background: #123d60;
}
</style>
<br />
<div class='subscribebtrix'>
<div align='center' style='color: #333; font: 22px Verdana; font-weight: bold; margin: 0px 0px 15px 0px; padding: 10px 0 10px;'>
Stay Connected</div>
<br />
<br />
<center>
<div style='margin: -30px 0 20px 0;'>
<a href='http://www.facebook.com/blogsmasala' target='_blank' title='Join us on Facebook'><img alt='facebook' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhe6SmFzzYMNx6SMzYsssZ7Oj8sYEgu4rqjqbbaHm4ns3z43xcu8ErGeuwzuIW0lAUvCnGGQtaPNkiGbPx8cgIXb-5gM8IuOfdMC2qq1ETd_61RTiYtdbi6DhHopdN7mNrcZyzw_LG49Kak/s1600/facebookicon.png' /></a>
<a href='http://www.twitter.com/mybloggingtips1' rel='nofollow' target='_blank' title='Follow us on Twitter'><img alt='twitter' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgeq9r81lrYvOiARYFWyg17dxgoWaWVU3Cy0lmlSLxqVCNt_ORk3rdmePtD5PxUMbw8tKCRjnDcGOsVbbYsXefDeo7-Sw3EFj9f9YCOkbtfkZ6Naq2dymfYr-8sMhdZiBMVMj1ZrkKVMER/s1600/twitter.png' /></a>
<a href='https://plus.google.com/UserId' rel='nofollow' target='_blank' title='Follow us on Google+'><img alt='gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqKoG-rZh5mbOTTT3eJ4_O6esq8oTchuapnzBVhwarva9OQ-arG16NhtmEb-MghcwBFJq3bBp_SCDDXNuY642OJpdoD069PGSMYeKsGDMkB61TWz2QQ_xS4hDvG1vCs8UFngPh_SKqMfjn/s1600/google-plus-icon.png' /></a>
<a href='http://www.pinterest.com/mybloggingtips' rel='nofollow' target='_blank' title='Follow us on Pinterest'><img alt='pinterest' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgy3C8tFReE2VjtucLDicGCKUNrlq7tbYwoAq5fMdtzpm3v3fsRqiGjqU1nysRcVCssIeDDvhT_b8JNjZb2xSC-M5XVRm29_W5jJeLjjGl2Yg-kt7Oh53Czfxf0qyA4bafB7c0LzhzaMvE6/s1600/pinteresticon.png' /></a>
<a href='http://feeds2.feedburner.com/mybloggingtips' rel='nofollow' target='_blank' title='Subscribe to RSS'><img alt='rss' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDX4FADlwOxqeNlm4bYgHgQHr59XJXlDmAD33EWCcuNfpB6Nh04Dql7PJI_QAz0ArtQEDacZC7FM00Cgjq_0fTxIb8KpZGxk-kx2vvWOpB3zTQATMJDGzKS-fmrnwMVmzT0vPsxakaw7k_/s1600/rssicon.png' /></a>
</div>
</center>
<div align='center'>
<a href='http://feeds.feedburner.com/mybloggingtips'><img alt='' height='26' src='http://feeds.feedburner.com/~fc/bl0ggertricks?bg=123D60&fg=ffffff&anim=1' style='border: 0;' width='88' /></a></div>
<div style='margin: 10px 0 0 6px;'>
<form action='http://feedburner.google.com/fb/a/mailverify' class='emailform' method='post' onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=mybloggingtips", "popupwindow", "scrollbars=yes,width=550,height=520");return true' style='margin: 0pt;' target='popupwindow'>
<input name='uri' type='hidden' value='mybloggingtips' />
<input name='loc' type='hidden' value='en_US' />
<input class='tbimailbox' name='email' onblur='if (this.value == "") {this.value = "Enter your email...";}' onfocus='if (this.value == "Enter your email...") {this.value = ""}' type='text' value='Enter your email...' />
<input alt='' class='button' title='' type='submit' value='Subscribe' />
</form>
</div>
</div>