Blogger Widgets, Blogging, Gadgets

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.
Also 
        Adding Stumble upon button in blogger

Social sharing widget by technologymake.com

Adding widget:

Integration of this widget is very easy in 3 steps.

Go to blogger dashboard >
then choose    Layout >  
 Select
   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 {
            position:fixed;
            bottom:15%;
            margin-left:-690px;
            float:left;
            border-radius:5px;
            -moz-border-radius:5px;
            -webkit-border-radius:5px;
            background-color:#f7f7f7;
            padding:0px 0px 0px 2px;
            z-index:10;
            border:1px solid #CCC;          }
.tcm-share {
float:left;
clear:both;
margin:5px 5px 1px 2px;
}
</style>
<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); 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-send=”false” data-layout=”box_count” data-width=”40″ data-show-faces=”false”></div>
</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=’http://twitter.com/share’ rel=’nofollow’>Tweet</a><script src=’http://platform.twitter.com/widgets.js’; type=’text/javascript’></script>
<br />
<div class=’tcm-share’ style=”margin-left: 3px;” id=’st’>
<script src=”http://www.stumbleupon.com/hostedbadge.php?s=5″></script>
</div>
<div class=’tcm-share’ id=’diggit’ style=’margin-left:3px;width:48px’>
<script src=’http://widgets.digg.com/buttons.js’ type=’text/javascript’></script>
<a class=”DiggThisButton DiggMedium”></a>
</div>
<div class=’tcm-share’ id=’pinit’ style=’margin:28px 5px 0px 7px;width:48px’ display:’block’>
<a href=”//gb.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.technologymake.com&media=http%3A%2F%2Fwww.technologymake.com&description=Next%20stop%3A%20Pinterest” data-pin-do=”buttonPin” data-pin-config=”above”><img src=”//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png” /></a>
<!– Please call pinit.js only once per page –>
<script type=”text/javascript” async src=”//assets.pinterest.com/js/pinit.js”></script></div>
<div class=’button-share’ style=’margin-left:3px;’ id=’gplusone’>
<script type=”text/javascript” src=”https://apis.google.com/js/plusone.js”></script>
<g:plusone size=”tall”></g:plusone>
</div>
<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=”http://www.technologymake.com/2014/03/Social-floating-widget-in-blogger.html”>Widgets</a></p>
</div></div></div>

Customization:

            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.  

You Might Also Like

2 Comments

  1. 1
  2. 2

    @Glenda Hampton Anderson Which piece of code showing? Could you able to giving me the URL where you showing this Widget Let I check for You?

Leave a Reply

Your email address will not be published. Required fields are marked *