Wednesday, November 11, 2015
How to Add Floating Share Buttons to Blogger
Below are guidelines on how to add floating share buttons to blogger blogs. This blogger widget appears at the side of all pages on your blog, clearly seen by your audience. Having your post shared by your readers with share buttons on social networking sites like facebook and twitter could be rewarding by bringing more traffic to your blog and with more blog traffic, better chances to get clicks on your ads. This is because each time your readers use the Floating Share Buttons to share your blog post on facebook or any other social network, if it is of interest to their friends they can also click on the link or reshare the post. Follow the steps below to add the Floating Share Buttons to your blog.
- From your blogger dashboard
- Click on 'layout'.
- Next, click on 'Add Gadget'.
- Copy and Paste the code below into the text field
<!-- 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" data-via='informationtutorial15' >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>
<fb:like layout="box_count" show_faces="false" font=""></fb:like></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;font-size: 9px;text-align:center;"> <a href="http://informationtutorial15.blogspot.com/2015/11/how-to-add-floating-share-buttons-on.html">Get this</a></div>
</div>
<!-- floating page sharers End -->
- Save the widget. View your blog to see the floating share buttons in your sidebar.
