How to Add Floating Social Share Buttons Widget to Blogger

Now a days, social networking sites are the best place to promote a blog or website to generate more traffic. Adding a floating social icon to blogger not only looks beautiful but it may also help your readers to like and share their favorite post with others in Facebook, twitter and other social networks. Today, I am going to share a beautiful floating social media widget for blogger.

1. Go to Blogger Dashboard and Select Layout.

2. Click on Add a Gadget and select HTML/JavaScript.

3. Now Copy and paste the below code to the content section.

<style type="text/css">

#social-buttons {

position:fixed;

bottom:20%;

left:10px;

float:left;

border-radius:5px;

-moz-border-radius:5px;

-webkit-border-radius:5px;

background-color:#fff;

padding:0 0 2px 0;

z-index:10;

}

#social-buttons .button-share {

float:left;

clear:both;

margin:5px 5px 0 2px;

}

</style>

<div id='social-buttons' title="Get this from safetrickzz">

<div class='button-share' id='like' style='margin-left:7px;'>

<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='sbutton' style="margin-left: 2px;" ><a class='twitter-share-button' data-count='vertical' data-via='Safe Trickzz' 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='button-share' style="margin-left: 3px;" id='su'>

<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>

</div>

<div class='button-share' id='digg' 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='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;">Get <a style="color: #3399BB;" href="http://www.safetrickzz.blogspot.com/">widget</a></div></div></div>

Customization

1.  Change the 20% value of bottom. (According to your needs).

2. Change the 10px value from left. (According to your needs).

3. Replace safe trickzz with your twitter user name.

5. Now save it.