Social Sharing Button Widget for Blogger Post Sharing

Hey guys today I have another awesome social sharing buttons widget for blogger blogs. Well I found this widget on some other website and I liked it so much that I tried to copy it on the blogger blog, so I tried to get the exact same result but I might lack in something or another but this widget works and look nice. So now to show you what this widget looks like I have applied a demo version below so, just have a look at it and apply it to your blog too.

Tweet

So now this widget as three major social buttons that are used these days, facebook, twitter and google plus 1 buttons, so now if you like it check below steps to apply it.

1. Open Blogger > Template > Edit HTML.
2. Press Ctrl + F & search for ]]></b:skin> tag & paste below code above it.

   #social_box{width:700px;text-align:center;display:inline-table}.fbk{background-color:#5071a2;background-image:url(http://i.imgur.com/g8GZmWr.png);float:left;height:70px;list-style:none;margin-right:2px;padding-top:65px;width:200px}.twr{background-color:#48b0dc;background-image:url(http://i.imgur.com/Z76fyo6.png);float:left;height:70px;list-style:none;margin-right:2px;padding-left:18px;padding-top:65px;width:250px}.gps{background-color:#bf3828;background-image:url(http://i.imgur.com/GXcI1jK.png);float:left;height:70px;list-style:none;padding-top:65px;width:200px}

3. Now your CSS styling has been placed, now just copy the below code and paste it where ever you want this widget to be rendered.

   <div id='social_box'><div class="fbk"><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/all.js#xfbml=1";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));</script><div class="fb-like" data-layout="button_count" data-show-faces="false" data-send="false"></div></div><div class="twr"><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><a href="https://twitter.com/share" class="twitter-share-button">Tweet</a></div><div class="gps"><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 class="g-plusone" data-size="medium"></div></div></div>

4. That's it guys now your widget will work like a charm, well you can remove all the JavaScript's in the above if you already have them in your blog.