Social floating sharing widget for blogger

Every one know the importance of social networks in this age. Especially for bloggers these networks are as backbone. These major social platform like Facebook, Google plus and Twitter has a source of traffic for web owners. Suitable reputations on these stations give us worth. A number of posts we have already publishing on this topic. Skipping any detail I jump on my subject “Social floating bar”. Many time while surfing Internet you may see this sharing widget on left side in websites. New bloggers face problems while adding this gadgetin HTML coding. So this is total new version of its kind. Trend of sidebar multi stylish buttons is increasing. 

Why to add floating bar:

This small tool gives a new way to sharing, and tweeting a blogger post. A reliable source for spreading knowledge on all famous networks! Great user experience plus give a new glance to your web/blog. If a user finds something helpful then he shares with an easy and new style with this widget. I add most worthy platforms in this widget. A number of experiments I make with this widget since last two days. Now it is ready to releasing. This branded widget add a new taste in your  blog.
        Adding Stumble upon button in blogger

Social sharing widget by

Adding widget:

Integration of this widget is very easy in 3 steps.

Go to blogger dashboard >
then choose    Layout >  
   add a Gadget
Choose HTML java script widget and paste the following coding there. Hit the orange save button and reload page. You are almost done.

<style type=”text/css”>
#tcm-floating-bar {
            padding:0px 0px 0px 2px;
            border:1px solid #CCC;          }
.tcm-share {
margin:5px 5px 1px 2px;
<div id=’tcm-floating-bar’>
<div class=’tcm-share’ id=’fblike’ style=’margin-left:7px; margin-bottom:0px’>
<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); = id;
js.src = “//”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div class=”fb-like” data-send=”false” data-layout=”box_count” data-width=”40″ data-show-faces=”false”></div>
<br /><div class=’tcm-share’ style=”margin-left: 2px;” ><a class=’twitter-share-button’ data-count=’vertical’ data-via=’technologymake‘ expr:data-counturl=’data:blog.url’ href=’’ rel=’nofollow’>Tweet</a><script src=’’; type=’text/javascript’></script>
<br />
<div class=’tcm-share’ style=”margin-left: 3px;” id=’st’>
<script src=”″></script>
<div class=’tcm-share’ id=’diggit’ style=’margin-left:3px;width:48px’>
<script src=’’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
<div class=’tcm-share’ id=’pinit’ style=’margin:28px 5px 0px 7px;width:48px’ display:’block’>
<a href=”//” data-pin-do=”buttonPin” data-pin-config=”above”><img src=”//” /></a>
<!– Please call pinit.js only once per page –>
<script type=”text/javascript” async src=”//”></script></div>
<div class=’button-share’ style=’margin-left:3px;’ id=’gplusone’>
<script type=”text/javascript” src=””></script>
<g:plusone size=”tall”></g:plusone>
<div style=”clear: both;font-size: 9px;text-align:center;”>
<p style=” line-height:0px; font-size:10px; font-weight:bold; text-align:center;”>
<a style=”color:#D3D3D3;” href=””>Widgets</a></p>


            margin-left:-690px;  change according to your page setting. Decreasing value widget will go R.H.S & increasing value gadget will move Left Hand Side.
background-color:#f7f7f7; Also if you want to change the color then replace this value by your own desired or similar color to your template. Replace data-via=’technologymake‘ with your Twitter name.
Alternatively remains unchanged in case of insufficient knowledge of CSS.
Need Help:
Facing any type of problem ask us. We will be feel glad to help you in any nuisance. If you find this widget helpful for others then Brothers and Sisters P.s. Share it as you can.  


  1. Glenda Hampton Anderson 7 August 2014
  2. Admin 7 August 2014

Leave a Reply