Floating social share buttons widget
Social bookmarking is great way to get more traffic.But how can you make your visitor Share your content with their social bookmarking profiles like Digg, Stumbleupon, and Social Communities like Google +, Facebook.That's the difficult part,most people feel lazy about sharing them with their Social bookmarking profiles.
But don't worry about it now.This widget make it easy for you.This floating widget helps you to get more attention from visitors...This widget will increase traffic to your blog. That's why this widget is effective and this is a very needed one for any web site.
In most sites i saw this widget on "Left" side. but i suggest "Right", because when the reader scrolling the page, mouse pointer is always in the "Right" side. So i think clicking Effectiveness
is high in "Right" side. ok then let's see how to add it to your blog
- Copy the code below
- Page element --> Add a Gadget --> HTML/JavaScript --> Paste the code and Save
<style>
#floatdiv {
position:fixed;
bottom:2%;
margin-left:870px;
z-index:10;
float:left;
padding-bottom:2px;
}
#ETiOne-Sbar {
background:#444;
border-top:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv">
<div id="ETiOne-Sbar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="SnOW_BiRDx">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 2px 0px;">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style=" padding:5px 0px 2px 0px;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td>
</tr>
<tr>
<td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://everythinginoneplaze.blogspot.com/2012/02/floating-social-share-buttons-widget.html">Get Widget</a></p>
</td>
</tr>
</table>
</div>
</div>
#floatdiv {
position:fixed;
bottom:2%;
margin-left:870px;
z-index:10;
float:left;
padding-bottom:2px;
}
#ETiOne-Sbar {
background:#444;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
border-radius:5px;-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top {width:52px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:52px !important; -moz-border-radius:3px;/*bs-fsmsb*/-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="floatdiv">
<div id="ETiOne-Sbar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="SnOW_BiRDx">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 2px 0px;">
<script type="text/javascript">
(function() {
var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];
s.type = 'text/javascript';
s.async = true;
s.src = 'http://widgets.digg.com/buttons.js';
s1.parentNode.insertBefore(s, s1);
})();
</script>
<a class="DiggThisButton DiggMedium"></a>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style=" padding:5px 0px 2px 0px;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td>
</tr>
<tr>
<td>
<p style=" line-height:0px; font-size:10px; font-weight:bold; text-align:center;"><a style="color:#D3D3D3;" href="http://everythinginoneplaze.blogspot.com/2012/02/floating-social-share-buttons-widget.html">Get Widget</a></p>
</td>
</tr>
</table>
</div>
</div>
After Done with copying code let's see how to customize the widget
- bottom:2%;
- Change position Top to bottom -
- margin-left:870px;
- Change position left to right -
- background:#444;
border-top:1px solid #ddd;
border-left:1px solid #ddd;border-bottom:1px solid #ddd;
- Change background and boader color -
Our hex color code generator will help you to find color codes
- data-via="SnOW_BiRDx"
- Change this to your Twitter username -
Tags:
How To Add Floating Social Media Sharing Buttons For Blogger, add Floating social share buttons widget, for blogger, wordpress, Free blogger tools, what are widgets, widgets for blogger, social share buttons widget facebook, facebook share button, Twitter share button, Stumbleupon share button, Digg share button, google plus one + one button, How to Increase uTorrent, BitTorrent Download Speed, How to Increase p2p Download Speed - Tcpip Patch, How To Increase 3G Signal - USB Dongle, How to Fix Mediafire Continuous Page Refresh,
2 comments:
thank you!!! :)
thank you, it's very useful
Post a Comment