Blogger Sliding Widget

Blogging becomes interesting when people share your content on different
social media sites and other websites with friends. In order to share
your content on social media sites by visitors; you need to add some
beautiful and smashing social sharing widgets. If your widget is looking
attractive and catches people's attention then your content might get
shared by visitors. For this purpose, there has been a huge number of
Blogger widgets and plugins by
different designers. Today, I would like to share a floating social
sharing widget with you which scrolls down automatically when visitors
scroll down the page. You can see this widget on my blog. The same widget I'm sharing with you.

The Benefits of This Widget:

There are many advantages you can get by using this widget on your blog.
The first benefit is that you can have all social sharing buttons in a
single widget and also one can send your content to someone via email by
using this widget. The second benefit is that this widget don't have
loadable JavaScript or jQuery codes so it can easily be loaded by
browser and also it scrolls down automatically and user can observe
sharing your content somewhere, while visiting your blog.

How to Add Social Media Floating Widget to Blogger?

The process of adding this widget to your blog is simplest. You need just to follow below steps:

1. Open Blogger
2. Go to Layout
3. Add a Gadget
4. Add HTML/JavaScript
5. Copy the below code and Save

<div
<!–sidebar floating share buttons code start–>

<style>

#pageshare {position:fixed; bottom:15%; left:10px; float:left;
border: 1px solid black;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#000000;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="Apply this Widget on your website or Blog">

<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='rt'><a href="http://twitter.com/share"
class="twitter-share-button" data-count="vertical"
data-via="UmarKhaleeq">Tweet</a><script
src='http://platform.twitter.com/widgets.js'
type="text/javascript"></script></div>

<div class='sbutton' id='gplusone'><script type="text/javascript"

src="https://apis.google.com/js/plusone.js"></script><g:plusone
size="tall"></g:plusone></div>

<div class='sbutton' id='su'><script
src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>

<div class='sbutton' 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>

<br/><div style="clear:
both;font-size: 9px;text-align:center;"><a
href="http://bloggerseotipstraining.blogspot.com/2013/03/vertical-social-media-sharing-buttons-blogger.html">[Get
This Widget]</a><font></font></div></div>

<!–sidebar floating share buttons code end–></!–sidebar></!–sidebar>

6. Save Arrangement


Customization


The floating is set to left side of your blog, if you want set it for right side of your blog then simply change the bolded  float:left property to float:right.