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“.

Image

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

Image

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

Image
Image

<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=’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;”><a style=”color: #3399BB;”
href=”http://www.zealmat.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.

About Mathias Amodu 889 Articles
My Name is Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large

2 Comments

  1. check cashing August 3, 2017
  2. Payday Loans San-diego August 20, 2017

Leave a Reply

*