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>

Customization

Replace the corresponding Blue bold color text with your social sites links and blogs urls.

You Like It?

I hope one of the above will suite your needs and you will like it. Please like and share this post to your friends.

Stylish Social Subscription Widgets for Blogger

1. Stylish Mini Subscription Widget

2. Stylish Subscription Widget With Google+ and Pinterest

3. Simple Style Subscription Box

4. Elegant Look & Feel Subscription Box

Customization

You Like It?

Post a Comment Blogger Facebook

Popular Posts

Blog Archive

Stylish Social Subscription Widgets for Blogger

1. Stylish Mini Subscription Widget

2. Stylish Subscription Widget With Google+ and Pinterest

3. Simple Style Subscription Box

4. Elegant Look & Feel Subscription Box

Customization

You Like It?

Share to:

Next

Newer Post

Previous

Older Post

Post a Comment Blogger Facebook