Facebook, Twitter, G +1, and Other Floating Sider-Bar Widget For Blogger


You will need this widget for your blog or website to make your site/blog interactive for those visitors who will like to share the content of your blog on there social website profile.

To install in a Blogger.
  1. Log in to your Bloggers account, under Design (Page Element)
  2. Click any of those "Add a Gadget" in your Page Element 
  3. In the window that opens, Click "HTML/Java Script" from the list of gadgets 
  4. Copy the bellow script and paste to the empty space provided, Save to exit the window 
<!-- Floating social share buttons start theeasytech.info-->
<style>
#floatdiv {
  position:fixed;
bottom:15%;
margin-left:-80px;
z-index:10;
float:left;
padding-bottom:2px;
}

#mbtsidebar {
        background:#fff;
        border-top:1px solid #ddd;
        border-left:1px solid #ddd;
        border-bottom:1px solid #ddd;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
        padding-left:5px;
        width:60px;
        margin:0 0 0 5px;
}

.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id="floatdiv">

<div id="mbtsidebar">
    <table cellpadding="1px" cellspacing="0">

    <tr>
    <td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="brilliantinfoville">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    </td>
    </tr>
    <tr>
    <td style="padding:5px 0 2px 0;">
    <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>
    </td>
    </tr>
    <tr>
    <td style=" padding:5px 0px 0px 0px;">

<g:plusone size="Tall" expr:href="data:post.url">
    </g:plusone></td>
    </tr>
<tr>
<td style=" padding:5px 0px 2px 0px;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td>a
</tr>

<tr>
<td style=" padding:5px 0px 2px 0px;">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</td>
</tr>
    <tr>
    <td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://www.brilliantinfo.net/2012/06/facebook-twitter-g-1-and-other-floating.html">Get This</a><!-- Do not remove this link --></p>


    </td>
    </tr>
    </table>
</div>
</div>
</div>
<!-- Floating social share buttons End -->
Note: The text on blue background is the position of the widget on the browser window and can be change either Left or Right.
The red text are the color, can be changed to your desired color (Go to  HTML Color Code)
You may also like Horizontal Floating Social Sharing Button

Comments