Add Floating Social Share Buttons To Blogger

Share... ☂

Share on Facebook
Share on Twitter
Share on Google+
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.
Share :

zealmatblog

No comments:

Post a Comment

Create your website from just N299/Month with DomainKing.NG.

P.S: Want me to help you personally? If yes, you can buy my helpful eBooks or Hire me now!

Do you need original SEO ready articles for your blog or website? If yes, hire Mathias Amodu on Fiverr. Expect simply the best from me.







Parse Your Adsense HTML code Here





We love to hear from you!

Sign in to comment "anonymously" without entering verification text.