How I Inserted Floating Sharing Bar on Blogger Blogs

Good Morning Readers, today I am going to show you how I inserted the floating sharing bar on my blogger blog. 

The floating sharing comes with different social networks which enables easy sharing of your blog post. The floating sharing bar comes with social network as Facebook likes, Tweet, Google+, Digg, Stumble Opon, Linkedin, Reddit etc.

Adding this floating sharing bar to your blog will make it easy for your blog readers to like, retweet, +1 and share your post, which will help in boosting your blog traffic. This has enabled me to get more facebook like since I inserted it on my blog.


The Floating Sharing Bar is all in one Gadget, it comes with more than 300+ social sharing options. You can click or hover your mouse around the share button to display the rest social sharing options as seen in the picture below.

How Do I insert the Floating Share bar to my Blogger blog?

Adding the Vertical Floating Bar to a Blogger blog is very easy. Follow the below instruction to add it to your blog:

1. Log in to your Blogger account.

2. Go to Layout

3. Click "Add A Gadget"

4. In the Add A Gadget window, select HTML/Javascript

5. Copy the code highlighted below and paste it inside the HTML/Javascript box

<!-- 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='delsublog' >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://delsublog.blogspot.com">Get</a> <a href="http://delsublog.blogspot.com/search/label/Facebook%20Tips">this</a></div>

</div>

<!-- floating page sharers End -->

Save the gadget and click "Save arrangement" button on the upper right corner.

View your blog and you should see it live.

What’s your say on this?

Kindly let us know via the comment box below.

Make sure you Subscribe Now to our feed so you won’t miss our next post.


Please don’t just read alone, LIKE and SHARE this with your friends via the like and share  buttons.

Buy Emma a drink with PAYPAL if you like this post.

Like Our Facebook Page: