share buttons can help you in getting more views from the social sites. But if you will add some attractive social button on your website. then your blog also looks stylish. And you will get more hits on share buttons. in this post, I going to give you floating social share buttons. Also, read this: How to add snow falling effects on your blogger blog.
after adding those buttons on your blogger blog. that buttons will appear on the left side of your blog. for more, you can test by adding this widget to your blogger blog. you can easily add this widget on your blogger blog. for adding floating social share buttons on your blogger blog. just follow our below steps.
how to add floating social share buttons on the blogger blog

add floating social share buttons on your blogger blog


  1. go to the blogger.com and log in your account.
  2. select your that blog where you want to add floating social share buttons.
  3. from the blog, dashboard clicks on the layout option. it will open layout page.
  4. now from the layout page click on the Add gadget link. 
    how to add floating social share buttons on the blogger blog
  5. it will open a new window. from this window select HTML/javascript widget. 
    how to add floating social share buttons on the blogger blog
  6. in the next page leave the title and paste the following code into the text box. 
    how to add floating social share buttons on the blogger blog
  7. press the save button. and social share buttons are added on your blog.


 <style type='text/css'>
#social-buttons {
position:fixed;
left:0;
bottom:30%;
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; border:1px solid #eee;' href='http://helponblogging.blogspot.com/2017/02/add-social-share-floating-buttons.html' rel='nofollow' target='_blank'>[Get This]</a></div></div></div>
now visit your blog and see how is it. if you have knowledge of CSS and HTML then you can customize and make it as you want. you can also request here for customization. I will customize it for you. Also, read this: how to show share to unlock content in blogger blog.
thanks for reading my this post. keep visiting for more useful posts. if you have any question about this post. you can ask me by dropping your comments below.

16 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete
  4. This comment has been removed by a blog administrator.

    ReplyDelete
  5. This comment has been removed by a blog administrator.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. This comment has been removed by a blog administrator.

    ReplyDelete
  8. This comment has been removed by a blog administrator.

    ReplyDelete
  9. This comment has been removed by a blog administrator.

    ReplyDelete
  10. This comment has been removed by a blog administrator.

    ReplyDelete
  11. This comment has been removed by a blog administrator.

    ReplyDelete
  12. This comment has been removed by a blog administrator.

    ReplyDelete
  13. This comment has been removed by a blog administrator.

    ReplyDelete
  14. This comment has been removed by a blog administrator.

    ReplyDelete
  15. This comment has been removed by a blog administrator.

    ReplyDelete
  16. This comment has been removed by a blog administrator.

    ReplyDelete