Social share have become one the most important and obvious reason for traffic. So building a social community is a tedious task. hence bloggers go for having social plugins like the recently popular ones "Easy mashable social bar". This plugin is built and developed by Syafz  which is available only for Wordpress. But now if you are a blogspot user, then you don't need to worry as we've cracked it and used for our site. In this tutorial you will be taught to implement this awesome template widget for your blog too.



Step1: Add a widget to your sidebar, choose HTML/Javascript widget

Step2: Now copy this complete HTML code and paste it into your widget.

<div id="inspiredmagz-mashable-bar">

    <div class="fb-likebox">
        <iframe scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:270px; height:80px;" src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/smartfatblogger&amp;send=false&amp;layout=standard&amp;width=270&amp;show_faces=true&amp;action=like&amp;colorscheme=light&amp;font&amp;height=80&amp;appId=234513819928295"></iframe>
    </div>

    <div class="googleplus">
        <span>Recommend on Google</span><div id="___plusone_10" style="height: 20px; width: 90px; display: inline-block; text-indent: 0pt; margin: 0pt; padding: 0pt; background: none repeat scroll 0% 0% transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline;"><iframe width="100%" scrolling="no" frameborder="0" title="+1" vspace="0" tabindex="-1" style="position: static; left: 0pt; top: 0pt; width: 90px; margin: 0px; border-style: none; height: 20px; visibility: visible;" src="https://plusone.google.com/_/+1/fastbutton?url=http%3A%2F%2Fwww.smartfatblogger.in%2F&amp;size=medium&amp;count=true&amp;annotation=&amp;hl=en-US&amp;jsh=m%3B%2F_%2Fapps-static%2F_%2Fjs%2Fwidget%2F__features__%2Frt%3Dj%2Fver%3DEzE0yK2XMJ0.en_GB.%2Fsv%3D1%2Fam%3D!bMxf2l2AOqKIHfWTkg%2Fd%3D1%2F#id=I11_1326707279373&amp;parent=http%3A%2F%2Fwww.smartfatblogger.in&amp;rpctoken=220599250&amp;_methods=onPlusOne%2C_ready%2C_close%2C_open%2C_resizeMe" name="I11_1326707279373" marginwidth="0" marginheight="0" id="I11_1326707279373" hspace="0" allowtransparency="true"></iframe></div> 
        <script src="https://apis.google.com/js/plusone.js" type="text/javascript"></script>
    </div>

    <div class="twitter">
            <iframe scrolling="no" frameborder="0" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp;align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp;lang=en&amp;link_color=&amp;screen_name=smartfatblogger&amp;show_count=&amp;show_screen_name=&amp;text_color=" class="twitter-follow-button" style="width: 300px; height: 20px;" title=""></iframe>
    </div>

    <div class="emailform">
        <form onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=http://feeds.feedburner.com/smartfatblogger', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" method="post" action="http://feedburner.google.com/fb/a/mailverify">   
        <input type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Enter your email" name="email" style="width: 140px; padding-left: 0px 0px 0px 5px; vertical-align: middle; font-size: 12px; height: 20px; margin-right: 7px;" />       
        <input type="hidden" name="uri" value="http://feeds.feedburner.com/smartfatblogger" />
        <input type="hidden" value="en_US" name="loc" />
        <input type="submit" value="Subscribe" />   
        </form>
    </div>

<!-- OPTIONAL -->
    <div style="background: #EBEBEB; font-size:9px; border: 1px solid #CCC; border-top: 1px solid white; padding: 3px 8px 3px 3px; text-align: right; border-image: initial;">
      <span><a target="_blank" href="http://www.seekably.com/go/hostgator" rel="nofollow">Go Hostgator WebHosting »</a></span>   
    </div>

</div>
</div>

<style>
#inspiredmagz-mashable-bar {
    border: 1px solid #EBEBEB;
    margin-bottom: 10px;
}
.fb-likebox {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D8E6EB;
    margin-top: -2px;
    padding: 10px 10px 0;
}
.googleplus {
    background: none repeat scroll 0 0 #F5FCFE;
    border-color: #FFFFFF #D8E6EB #EBEBEB;
    border-style: solid;
    border-width: 1px;
    color: #000000;
    font-family: Verdana,Geneva,sans-serif;
    font-size: 12px;
    line-height: 1px;
    padding: 9px 11px;
}
.twitter {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #EEF9FD;
    border-color: -moz-use-text-color #C7DBE2 #C7DBE2;
    border-right: 1px solid #C7DBE2;
    border-style: none solid solid;
    border-width: 0 1px 1px;
    padding: 10px;
}
.emailform {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0 0 #D8E6EB;
    border-color: #EFF5F7 #B6D0DA #B6D0DA;
    border-right: 1px solid #B6D0DA;
    border-style: solid;
    border-width: 1px;
    line-height: 1px;
    overflow: hidden;
    padding: 10px;
}
</style>

Step3: Now you can observe that I've already used the CSS into the widget itself, which will work.

And voila, that's it you've done it! ENJOY. Share your enthu with us by sharing this post with other blogger friends.