How To Add Floting Social Media Buttons to Blogger

Almost every blogger use the Floating social media buttons  in leftside to their blog/website. Mainly Facebook, Google+, Twitter, Instagram, Pinterest are used. With this visitor can easily share your articles that help to boost the SEO. Today I will discuss about "How to add the floating social media button to blogspot blog". Let's start.

How to add floating social media buttons to blogger sidebar-

You can add social media buttons by two ways. Choose any one method below.

1. By adding internal JS code-

-> First login to your blogger account and go to Layout.

-> Click on Add A Gadget and add Html/Javascript widget.
-> Now copy and paste the below codes and Save.

<style type="text/css">#social-buttons {position:fixed;bottom:15%; margin-left:-721px;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="xxx"><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='Bloghunt' 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="https://bloghunts.blogspot.com/">widget</a></div></div></div>

-> Change 'xxx' with any title as you want.
-> Change twitter username 'Bloghunt' to your own one.

2. Control from another website.

Step 1

Sign in to your GetSiteControl account. If you do not yet have an account, create one, it is free.

Step 2

Click the Site settings link at the top of the page and switch to the Install tab.

Step 3

You will see a window with a piece of code in it.

Press the Copy to Clipboard button to copy the provided code.

Step 4

Login to your Blogger account, choose the necessary blog and switch to Template. Click the Edit HTML button.

Step 5

Find the closing </body> tag at the bottom of the page and paste the code you’ve copied from GetSiteControl right before this tag.

Step 6Click Save template to save the changes.

Step 7

Now  go back to your GetSiteControl dashboard and create the first widget. To create click on 'Create widget' and select 'share'.

Step 8

Now choose position, color, font's color as you want (you can also edit it later) then simply save it.

Step 9 

Now activate it.

--> How to add social locker to blogspot blog

That's all. You are done. Now go to your blog and check. 

Hope you understand everything rightly. If you have faced any problem feel free to ask below in comment section. If this post helps you please do share and subscribe.  Happy blogging.