How to Add Floating Social Media Sharing Buttons in Blog

The most interesting and popular among social media sharing of blogs or websites is Floating Social Media Sharing. In almost all top-level websites, such social media sharing buttons are added. As well as enhancing the beauty of the blog, it helps to easily share blog posts in your social media. As a result, the potential for getting more visitors from Social Media increases.

Today, I will share the Floating Social Media Sharing Widget, together with Facebook Like, Twitter Share, Google+ and StumbleUpon buttons. These buttons will have Like and Share Count through a separate box. Moreover, you can add more buttons to it if you wish. This type of button is usually added to the blog from Add This website, which can not be customized. But what I'm sharing is entirely through our own coding. This allows you to customize it as you wish.

How to add to the blog:

• First log in to your blog.
• Click Layout from the blogger dashboard.
• Now click on Add Gadget from right side layout. See the below  image-

• Then click on HTML / JavaScript.
• Now copy the code below and paste it into the HTML / JavaScript box

[start code]

<style type="text/css">

#social-buttons {
   position:fixed;
   bottom:30%;
   margin-left:-740px;
   float:left;
   border-radius:5px;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   background-color:#fff;
   padding:0 0 2px 0;
   border:2px solid #000000;
   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 www.prozokti.com">
<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='kawsar360' expr:data-counturl='data:blog.url' href='https://twitter.com/share' rel='nofollow'>Tweet</a><script src='https://platform.twitter.com/widgets.js'; type='text/javascript'></script>
<br />
<div class='button-share' style="margin-left: 3px;" id='su'>
<script src="https://www.stumbleupon.com/hostedbadge.php?s=5"></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;">Get <a style="color: #3399BB;" href="https://www.prozokti.com/2015/05/floating-social-media-sharing-buttons-for-blogger.html">widget</a></div></div></div> [code end]

• Finally Save the Gadget.

Customization:

• The red marked bottom: 30% is the vertical alignment. That is, you want to keep it up or down. The longer you increase this number, the more you go up.
• The upper 2nd red mark margin-left: -740px is the horizontal alignment. That is, you want to keep it right or left. The more you increase this number, the more you move to the left.
• Then replace Pink color kawsar360 by giving your Twitter account User Name.
• You can delete any of these widgets if you wish. If you wish, you can also add new buttons.