HOW TO ADD FLOATING SOCIAL MEDIA SHARE BUTTONS

This tutorial is mainly aimed at How to add social media share button to your blog. Below is an example for bloggers on blogspot platform to follow kindly select all [ ctrl + A] the codes from the text area below and add them to a widget on your blog.

To really get this cool, you need a bit knowledge of CSS to play around with this very share widget <style> #thiswidget { height: 20px; width: 56px; border-radius: 0 0 5px 5px; float: left; padding: 0 0 0 12px; background-color: #D0D0D0; } #boxshare { display: scroll; position:fixed; bottom:50px; left:5px; width: 65px; background-color:#C2020C; border: 1px solid #92020A; border-radius:2px; padding:0 0 2px 0; -moz-border-radius:5px; -webkit-border-radius:5px; z-index:10; } #boxshare .boxbutton { float:left; clear:both; margin:3px; } .fb_share_count_top { width:68px !important; } .fb_share_count_top, .fb_share_count_inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .FBConnectButton_Small .FBConnectButton_Text { padding:2px 2px 3px !important; -moz-border-radius:3px; -webkit-border-radius:3px; font-size:8px; } .FBConnectButton_Small, .FBConnectButton_RTL_Small { width:68px !important; -moz-border-radius:3px; -webkit-border-radius:3px; } </style> <div id='boxshare' title="Share This"> <div class='boxbutton' id='gb'> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> <div class='boxbutton' id="fb-root"> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:send layout="box_count" show_faces="false" font=""></fb:send></div> <div class='boxbutton' id='rt'> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="naijafreakynews">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div> <div class='boxbutton' id='gplusone'> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> <div class='boxbutton' id='fb'> <a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div> <br/><div style="clear: both;font-size: 12px;text-align: center;"> </div> </div>
To change the color of the of the share plugin to match with your template, do search for the background color and change it to whatever color of your choice

background-color:#C2020C;
For example you can change #c2020c to #d700e1 or whatever.

 

How to Add it to Your Blog

Navigate to the Layout section of your Blog and select any widget and paste the whole code there. Save it and reload your page to see the share buttons display on your blog. Please post your comment below if you encounter any bug. Thanks