How To Add Floating Share Buttons To Your Blog's Side Bar

Here in this tutorial you will learn how to add a floating social share buttons to the side bar of  your blog or website.

This is very easy to achieve, but l always advice you backup your template before implementing this code just in case an error occurs .

How to backup your template:

• Login to your blogger dashboard.
• Click on template.

• on the top right of the window, click Backup/Restore.
• And finally Click Download template.

How to add the floating sidebar share buttons:

• Login to your blogger dashboard.
• select Layout from the menu.
• Click on Add a Gadget
• Select HTML/JavaScript
• Give it your desired title (optional) and place the code below inside the content textbox.

<!-- floating page sharers Start Share This With Friends-->

<style>

#pageshare {position:fixed; bottom:15%; right:10px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;padding:0 0 2px 0;z-index:10;}

#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}

.fb_share_count_top {width:48px !important;}

.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}

.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}

</style>

<div id='pageshare' title="Share This With Your Friends">

<div class='sbutton' id='rt'>

<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a>

<script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script>

</div>

<div class='sbutton' id='gb'>

<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>

<div class="fb-share-button" data-type="box_count"></div></div>

<div class='sbutton' id='gplusone'>

<g:plusone size="tall"></g:plusone>

</div>

<div class='sbutton' id='at'>

<a class="addthis_counter"></a>

<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"></script>

</div>

<div style="clear: both; color: blue;font-size: 9px;text-align:center;"> <a href="http://www.brownteks.com/2016/10/how-to-add-floating-share-buttons.html" rel="nofollow">Get this</a></div>

</div>

<!-- floating page sharers End -->

• Then click Save

That’s all, now reload your blog and you will see the floating share button Live on side bar

DON'T FORGET TO LEAVE YOUR COMMENTS AND ALSO SHARE THIS POST