Add Floating Social Share Buttons To Blogger

2016_05_26_06_15_10
Add Floating Social Share Buttons To Blogger 11
Follow me

Mathias Amodu

Founder at Zealmat Limited
2018 NIRA Award winner for Youth Development, A Web and SEO Specialist, Blogger, Student, Son, A business Man
Add Floating Social Share Buttons To Blogger 11
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=”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.

Also read  The A - Z Of How To Change Who See Your Blog

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

About Mathias Amodu 928 Articles
2018 NIRA Award winner for Youth Development, A Web and SEO Specialist, Blogger, Student, Son, A business Man

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.


*