Floating Social share Widget

Floating Social Share Widget or Gadget are generally blog traffic enhancer actually can even create viral effect like in case person with 1k or 100k follower on twitter or fans of facebook shared the article/post of the blog can simply result into the huge traffic gain plus extra beneficial point is that Search Engine Optimization is done for free. It must be also noted that your blog/website presence over internet is increased and your link is available several hundred place.

Be ready for the viral effects:

Float Social Share Widget:

• Thumb Up Social Share Widget
• All Social Sharing Buttons Floating Widget For Blogger
• Floating Vertical Bar With Share Buttons Widget For Blogger
• Social Media Sharing Buttons Widget For Blogger [RECOMMENDED]

Thumb Up Social Share Widget

Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the following code in it:

<script>
window.onload = function() {
function getScrollTop() {
if (typeof window.pageYOffset !== 'undefined' ) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
window.onscroll = function() {
var box = document.getElementById('Scrolling-fixed'),
scroll = getScrollTop();
if (scroll <= 700) {
box.style.top = "760px";
}
else {
box.style.top = (scroll + 60) + "px";
}
};
}
</script>
<style>
#Scrolling-fixed {
position: absolute;
}
#floatdiv {
bottom:15%;
margin-left:-850px;
z-index:-9999;
float:left;
padding-bottom:2px;
}
#mbtsidebar {
background:#fff;
border-top:2px solid #90A4BF;
border-left:1px solid #90A4BF;
border-bottom:1px solid #90A4BF;
border-right:1px solid #90A4BF;
border-radius:8px;
-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="Scrolling-fixed">
<div id="floatdiv">
<div id="mbtsidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="padding:5px 0px 0px 0;">
<span><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-DbQ0i4sGIzT8NGK6-vvH1xMnHbzgTT3tClIFrhAPM3mDQCvvLmzBYDxa-Q07HpDmYEj0o4bLlnT4qrXn66NM4sxnx6YRtJGG8gYxuco-uQqceNe_XjjrWmDoYP7hOXvtIupbiacDrmk/s1600/thumbs+up.png" /></span>
</td>
</tr>
<tr>
<td style="padding:5px 0px 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="Bloggingehow">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: &#39;en-US&#39;} </script>
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style="padding:2px 0px 0px 0;">
<p style=" line-height:0px; font-size:8px; font-weight:bold; text-align:center"><a style="color:#D3D3D3;" href="http://www.bloggingehow.com">widgets</a></p>
</td>
</tr>
</table>
</div>
</div></div>

Source: http://www.bloggingehow.com/2012/11/thumbs-up-floating-social-media-sharing.html

All Social Sharing Buttons Floating Widget For Blogger

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

1. Blogger >> Template >> HTML >> Proceed >> Expand the Widget Template
2. Search for below code by using CTRL+F Short Key

         <b:includable id='post' var='post'>
Just below/after above code paste the following code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.mbt_social_floating{
position:fixed; bottom:10%; margin-left:-60px; float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmTf3l04cJ4RNBXMJl8yfnpZtV17ojDnZazvKegArj0gd8X150nz7mHUHMaNwnXqPncPohgCK5cZR8mWpM3DLubOoKIYgGjGpKWPhHN3STgPM3gBdtW3H_O-Dzcym5SPQt-aHCtCF58Jz/s400/gc_social_sprite.gif&#39;) no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsmTf3l04cJ4RNBXMJl8yfnpZtV17ojDnZazvKegArj0gd8X150nz7mHUHMaNwnXqPncPohgCK5cZR8mWpM3DLubOoKIYgGjGpKWPhHN3STgPM3gBdtW3H_O-Dzcym5SPQt-aHCtCF58Jz/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_social_floating .stBubble_count{
width:44px !important;
font-size: 15px !important;
font-weight: normal !important;
padding-top:7px !important;
height:23px !important;
background:none !important;
}
.mbt_social_floating .st_twitter_vcount .stBubble_count{
color:#00a6df;
background-color:#f8fbfc !important;
}
.st_fblike_vcount{
margin-bottom: 0px;
display: block;
}
.st_twitter_vcount{
margin-bottom: 3px;
display: block;
}
.st_email{
margin-bottom: 5px; margin-top: 3px;
display: block;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class='mbt_social_floating'>
<script type='text/javascript'>var switchTo5x=true;</script>
<script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
<script type='text/javascript'>stLight.options({onhover:false});</script>
<span class='st_fblike_vcount' displaytext=''/>
<span class='st_twitter_vcount' displaytext='' st_via='onlineustaad'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<div style='margin:0px 0 0 5px;'>
<span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
ui_cobrand: &quot;MY BLOGGER TRICKS&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://www.mybloggertricks.com/2012/05/create-floating-bar-for-pinterest-other.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

source: http://www.onlineustaad.com/2012/10/social-buttons-floating-widget.html

Floating Vertical Bar With Share Buttons Widget For Blogger

 Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the following code in it:

<a href='http://www.esocialsense.blogspot..com'><img alt='Floating Vertical Bar With Share Buttons widget by Making Different' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZob3yWljbSjEqFu_uaaSZnQg85G7IWR_vjS9PiPEOhWcIw8XfievtcPbOa3IzFUKl77CWRKp5-HO8L1M60hT5xWU-Mypp1r4Ph4fcvXg2pcXsN9T3Vqjii4Yic5RoTyYYmUnalZqcHDGG/s1600/best+blogger+tips.png'/></a><div class="addthis_bar addthis_bar_vertical addthis_bar_medium" style="background:#98A2A7; border: 1px solid #000000; top:120px;left:50px;">             <div class="addthis_toolbox addthis_default_style addthis_32x32_style">                 <span><a class="addthis_button_preferred_1"></a></span>                 <span><a class="addthis_button_preferred_2"></a></span>                 <span><a class="addthis_button_preferred_3"></a></span>                 <span><a class="addthis_button_preferred_4"></a></span>                 <span><a class="addthis_button_compact"></a></span>             </div> </div> <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js"></script>

Source: Original www.esocialsense.blogspot.com

Floating Vertical Social Widget javascript - Recommended  

Go to Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript and paste the following code in it:

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>
<script>
var options={ "publisher": "074821ed-063e-4ae5-bad9-3e26ecf249f3", "position": "left", "ad": { "visible": true, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "googleplus", "twitter", "linkedin", "email", "pinterest"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

Source: Unknown

Conclusion:

Last one is the best, because of small size of code and does not over burden the blog and even sometime over java script and Jquery can stuck your blog on browser or slow down internet experience. Happy Blog.

Check out my facebook and Twitter.