Here I'm posting Mashable Style Social Subscription Widget for Blogger, Its very easy to install and doesn't affect blog template. It has brand new attractive design and professional look.
1. Go To Blogger > Dashboard > Layout.
2. Click Add Widget.
3. Choose HTML/Java Script.
4. Paste the following code in it.
How To Add This Widget to Your Blog ?
2. Click Add Widget.
3. Choose HTML/Java Script.
4. Paste the following code in it.
5. You have to make some changes before saving this widget, I've marked them with red color. Please don't remove our attribution link from this widget, allow it to remain same for as our reputation.
<style type="text/css">
/*<!CDATA[*/
#bh-mashable{width:300px;margin:auto;padding:0;}
.bh-googleplus {height: 57px;}
.bh-facebook {background:#FFFFFF;border: 1px solid #DCDCDC;margin-top: -2px;padding: 5px 10px;}
.bh-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;}
.bh-gplusone span {display: inline-block;vertical-align: middle;height: 20px;margin-top: -17px;font-size: 11px;font-family: "Arial","Helvetica",sans-serif;}
.bh-twitter {background-color: #eef9fd;border: 1px solid #c7dbe2;border-top: 0;}
.bh-twitter a.twitter-follow-button {display: block;}
.bh-twitter iframe {margin: 9px 11px;}
.bh-emailbox {background-color: #E3EDF4;border: 1px solid #b6d0da;border-top: 1px solid #eff5f7;padding: 12px 16px;overflow: hidden;}
.bh-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;}
.bh-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;}
.bh-emailbox input.emailu:focus {color: #333;}
.bh-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;}
.bh-emailbox input.submitu:hover {text-decoration: none;}
.bhDefault {border: 1px solid #cc7c00;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%);}
.bhDefault: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%);}.bh-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;}
.bh-moresubs a {display: inline-block;font-weight: bold;color: #1E598E;text-decoration: none;text-shadow: 1px 1px 1px #fff;}
/*]]>*/
</style>
<div id="bh-mashable">
<div class="bh-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/+RohitAsare" data-width="300" data-height="69" data-theme="light"></div>
</div>
<div class="bh-facebook">
<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fbloggerhero1&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="bh-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:///"></div>
<span>Recommend on Google</span>
</div>
<div class="bh-twitter">
<a href="https://twitter.com/rohitasare1" class="twitter-follow-button" data-show-count="true">Follow @rohitasare1</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="bh-emailbox">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=techethix', '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="64px">
<input class="submitu bhDefault" type="submit" value="Subscribe"/>
</td>
</tr>
</table>
<input name="uri" type="hidden" value="techethix"/>
<input name="loc" type="hidden" value="en_US"/>
</form>
</div>
<div class="bh-moresubs">
<a href="http://www.bloggerhero.com/" title=''get this widget>Get</a>
</div>
</div>
Customization in above Widget :
1. Change your Google+ Profile Link (Instead of https://plus.google.com/+RohitAsare )2. Replace your Facebook Page Username with bloggerhero1
3. Replace your Twitter Username with @rohitasare1
4. Replace your FeedBurner Username with techethix
6. Now after doing changes, Click Save and place this widget where you want it to be appear.
That's it your are done now, Enjoy Mashable Style All in One Social Subscription Widget.
Don't forget to Subscribe Us via Email and Do share our posts with your friends and you can also add our Badge to your Blog / Site as a Reputation :-)
