Learn How To Add floating social media sharing buttons to your Blog

Here is a Post on a way to add a floating social media bar to a blog. I created it into a device, thus you do not need to go in your template HTML to put in (or remove) them. simply drop the total code into a HTML/JavaScript gadget. I even have enclosed Facebook Like, Re Tweet, StumbleUpon, Digg This and Google+ buttons within the bar and every of them comes with a live counter. you'll add additional social bookmarking or sharing buttons later if you want.

Adding the buttons to blogger

• Go to "Layout".

• Click add a "Gadget".

• In add a gadget window, select "HTML or JAVASCRIPT".

• Copy the below code and paste it inside the content box.

• Now save the gadget.

• You can drag the gadget and reposition it anywhere of your choice.

• Click "Save" tab available on top right hand side.

   

  <!-- floating share bar Start viniwebworld.blogspot.com--><br /><style type="text/css"><br />#pageshare {position:fixed; bottom:15%; margin-left:-880px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}<br />#pageshare .sbutton {float:left;clear:both;/*bs-fsmsb*/margin:5px 5px 0 5px;}<br /></style><br /><div id='pageshare' title="Get this from viniwebworld.blogspot.com"> <br /><div class='sbutton' id='like' style='margin-left:8px;'> <br /><div id="fb-root"> </div> <br /><script>(function(d, s, id) {<br />  var js, fjs = d.getElementsByTagName(s)[0];<br />  if (d.getElementById(id)) return;<br />  js = d.createElement(s); js.id = id;<br />  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";<br />  fjs.parentNode.insertBefore(js, fjs);<br />}(document, 'script', 'facebook-jssdk'));</script><br /><div class="fb-like" data-send="false" data-layout="box_count" data-width="40" data-show-faces="false"> </div> <br /></div> <br /><div class='sbutton' id='rt'> <br /><script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></script><br /></div> <br /><div class='sbutton' id='su'> <br /><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script><br /></div> <br /><div class='sbutton' id='digg' style='margin-left:3px;width:48px'> <br /><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><br /><a class="DiggThisButton DiggMedium"></a><br /></div> <br /><div class='sbutton' id='gplusone'> <br /><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><br /><g:plusone size="tall"></g:plusone><br /></div> <br /><div style="clear: both;font-size: 9px;text-align:center;"> Get <a href="http://www.viniwebworld.blogspot.com/">widget</a></div> <!-- Do not remove this link --><br /></div> <br /><!-- floating share bar End -->