Add Floating Social Share Buttons To Blogger

Adding a floating social share buttons to blogger is a nice idea because most of your blog visitors may not make use of the default share tab below post.

Early this week we talked about how to add facebook share, like and twitter tweet button to blogger mobile view and it was perfectly successful.
So.today we are going to be talking about how to add floating social share buttons to blogger, just follow the below step carefully.

Step 1
Login to blogger dashboard then select your preferred blog.

Step 2
Now scroll your mouse down and click on “Layout“.

Step 3
Now on your blog “Layout” click on “Add a gadget“.

Step 4
Then select the “HTML/JavaScript” and paste the below xose into the box.

<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=”Get this Social
Sharing Gadget”>
<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=’AnkitKrSingla’ expr:data-
counturl=’data:blog.url’ href=’//
twitter.com/share’ rel=’nofollow’>Tweet</
a><script src=’//platform.twitter.com/
widgets.js’; type=’text/javascript’></script>
<br />
<div class=’button-share’ style=”margin-
left: 3px;” id=’su’>
<script src=”//www.stumbleupon.com/
hostedbadge.php?s=5″></script>
</div>
<div class=’button-share’ id=’digg’
style=’margin-left:3px;width:48px’>
<script src=’//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=”//
apis.google.com/js/plusone.js”></script>
<g:plusone size=”tall”></g:plusone>
</div>
<div style=”clear: both;font-size: 9px;text-
align:center;”><a style=”color: #3399BB;”
href=”//www.ccnworldtech.com/2016/05/add-floating-social-share-buttons-to.html”
rel=”nofollow” target=”_blank”>[Get This]</
a></div></div></div>

Step 5
Finally click on the “save” button below and that’s all you need to do.

But i will advice you only display it on your desktop view so that your blog speed will remain fast.