The key to a successful content writer is how much viral things do you write? Like how much are the chances that the content which you write will also be shared to the other people on the social sites. Adding social media share buttons is always a good practise to give visitors an opportunity to share your content. Today, I thought to make a blogger social sharing widget for you guys which may get fixed at the top of the page once user scrolls past the social media sharing buttons bar and thus it may get converted into a floating social media sharing bar. I have already posted a tutorial on how can you add social media custom sharing buttons to the blogger. So, if you like those buttons which are indeed static then you can also go for them but I recommend you this way since a floating social media sharing buttons bar for blogger will have more chances for user to click on the sharing buttons. Thus, your content will be promoted on the social sites.

Demo Of the Floating Social Media Sharing Buttons Which Get Fixed at the top of page once Scrolled Down

Adding Floating Social Media Sharing Buttons For Blogger:

You just need two step guide to all the difficult task, since the code has been already pre-cooked by me and you don’t need to worry about coding part of these floating social media sharing buttons for blogger. Followings are the step to add these cool buttons:

Add the jQuery to your blogger template:

First you need to add jQuery to your blogger template. Since, the social sharing bar will get fixed to the top of the page once user scrolls down just with the power of jQuery. The jQuery is going to automatically add a fixed class to the social media sharing bar once user scrolls past it. Edit your template in the blogger, (Learn How to Edit Template in Blogger) Put the following code just above the </head> tag.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

It will call the jquery from the Google CDN. Now, you need to add the HTML markup in the blogger’s template.

Adding the Markup For Floating Social Media Share Buttons For Blogger:

Again you need to edit the template, find this line if you want to add the share buttons just below the heading of the article which is the ideal position and I recommend it. Or else you can add just above the article main content too. Find “<div class=”post-header-line-1″></div>” and paste the below code just below it, or else you can also add the below code above this division. If you understand the HTML markup then you can easily place the social sharing buttons. Keep on trying till you find the perfect place for social sharing buttons.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='sharebar'>
  <style type="text/css">
#sharebar {background: #fafafa;padding: 12px 32px 0px 22px;width: 549px;}
#sharebar li {float: left;}
#sharebar .icons {background: url('http://3.bp.blogspot.com/-jl_OFi7Fyh4/UfRbocIw4cI/AAAAAAAABu8/ZMinWSydLLc/s1600/sprite_socialshare_talkofweb.png') no-repeat top left;padding: 2px 0 6px 28px;margin-right: 10px;}
.fixed {position: fixed;overflow: hidden; top:0;}
#sharebar .Facebook {}
#sharebar .Twitter {background-position: 0 -35px;}
#sharebar .stumble {background-position: 0 -70px;}
#sharebar .delicious {background-position: 0 -105px;}
#sharebar .reddit {background-position: 0 -142px;}
#sharebar .digg {background-position: 0 -177px;}
  </style>
<!-- Stumbleupon -->
<ul><li>
<!-- Facebook -->
<a class="Facebook icons" expr:href='&quot;http://www.facebook.com/share.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Facebook</a></li><li>
<!-- Twitthis -->
<a class="Twitter icons" expr:href='&quot;https://twitter.com/home?status=&quot; + data:post.title + &quot;-+&quot; + data:post.url' rel='nofollow' target='_blank'>Tweet</a></li><li>
<!-- stubmle -->
<a class="stumble icons" expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Stumble</a></li><li>
<!-- Delicious -->
<a class="delicious icons" expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Delicious</a></li><li>
<!-- Reddit -->
<a class="reddit icons" expr:href='&quot;http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Reddit</a></li><li>
<!-- Digg -->
<a class="digg icons" expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' target='_blank'>Digg</a></li></ul>
<a style="display: block; float: right;" href="https://www.talkofweb.com/floating-social-media-sharing-buttons-for-blogger-sharing-widget" rel="nofollow">Grab this related post Widget!</a>
</div> <!-- sharebar wrapper widget for Blogger by Talkofweb.com -->
</b:if>

The above code is modified to work on just the post pages of your blog, the above share bar will not appear on the homepage. Since, it gets fixed at the top of the page once you scroll down the page. At the home page there are a lot of posts and everyone with a fixed social share bar at the top will not look cool. If you want to add it to the home page also then continue reading I have that in faq section in the end.

Floating the div for the social sharing bar for Blogger With jQuery:

You need to add jQuery trigger code just above the “</body>” tag of your blogger template. Copy the following code and paste it directly above the </body> tag.

<script type="text/javascript">
jQuery(document).ready(function ($){  
  var top = $('#sharebar').offset().top - parseFloat($('#sharebar').css('marginTop').replace(/auto/, 0));
  $(window).scroll(function (event) {
    // what the y position of the scroll is
    var y = $(this).scrollTop();

    // whether that's below the form
    if (y >= top) {
      // if so, ad the fixed class
      $('#sharebar').addClass('fixed');
    } else {
      // otherwise remove it
      $('#sharebar').removeClass('fixed');
    }
  });
});
</script>

The above code will add a class fixed when the user will scroll past the social share bar in the article section. Thus, the social share bar will get stuck to the top of the page which can let you have more shares for your blog.

Save the template and have a look at your blog. Once user scrolls down, the social bar should look fixed or floated with the page like this:

FAQ: About the Social Sharing Bar For Blogger:

Can I make social share bar just appear at homepage of my Blog?

Yes you can surely, but be sure to remove the first and third step code from your blogger’s blog template i-e the jQuery library and the trigger code for jQuery. After that remove this line from the start of the XHTML markup i-e the main markup “<b:if cond=’data:blog.pageType == &quot;item&quot;’>” and remove this from the end of the markup “</b:if>” save your template and you are done. Now, it will not float and will also appear at the blog’s homepage.

Can I remove the floating of the Social Share bar?

Yes, this is again pretty simple. In this case you just need to remove the first step jQuery library and the last step’s jQuery Trigger code from your blogger’s blog template. Now, the social share bar will not appear at homepage plus it will not also float.

Will these social sharing buttons slow down the loading of my blog?

No, absolutely not, I just coded them with one image. Yes, all the images used in this social sharing widget for blogger are actually included in one image. Plus, this widget is not loading any external javascript or Iframe from other social sharing sites. Thus, it’s the fastest solution at the present with some grace. All the buttons are custom made.