Add Floating Social Share Buttons To Blogger

Get Free SEO Tips

2016_05_26_06_15_10
Follow me

Mathias Amodu

Founder at Zealmat Limited
Mathias Amodu, a passionate blogger with full interest in making the world a better place for upcoming webmasters in the society at large
Follow me
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=”https://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 912 Articles
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. The payday advance organizations guarantee that capable borrowers just utilize their administrations in crises – as opposed to utilizing them to cover regular costs, they say, individuals come to them when a startling issue comes up, for example, unanticipated auto repairs or a high quarterly bill.

Leave a Reply

Your email address will not be published.


*


[mc4wp_form id="3153"]