I'm sure many people would have seen the floating share icons on various sites. Most of the floating share buttons which I found from Google search was the one similar to Mashable. These tutorials used JavaScript - jQuery to achieve a smooth gliding but, doing so will add too much of weight on your blog. It increases the size of your template apart from the script involved in loading those buttons.
You may very well notice that the facebook like boxes or buttons occupy a huge space because the scripts that they use are by default heavy and nothing could be done as such especially as a blogspot user. Thus, it becomes our responsibility to reduce the load time as much as we can. So, this post illustrates on adding floating share icons just with a simple CSS. I suggest you to read the following article for speeding up your blog - Speed Up Your Blog : Tips And Tools.
Biggest Advantage: No script is involved for the floating feature. Only scripts involved are those associated with the share buttons - facebook, twitter, etc... Take a look at the screenshot below for better understanding.
So, let's get started with this tutorial.
1. Navigate to "Design>>Edit HTML" and make a backup of your template by clicking on the "Download full template" link at the top of the page. Once the back up is over, expand your template and search for the following piece of code.
<div class='post-footer-line post-footer-line-1'/>
2. Just paste the following piece of code just below the line mentioned in step 1.
<div style='position: fixed; top: 1%; right: 1%;'>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<br/>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='box_count' send='false' show_faces='false'/>
</div>
<script type='text/javascript'>
tweetmeme_url = '<data:post.url/>';
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/>
<br/>
<fb:like action='like' colorscheme='light' expr:href='data:post.url' font='arial' layout='box_count' send='false' show_faces='false'/>
</div>
3. I have used only facebook and twitter share counters in my coding. You may add any number of share widgets as you want within the div tags. But, make sure you add a break tag (<br/>) after each and every script - makes the share buttons look neat. In order to make the facebook share button work, add the following piece of code above </head> in your template.
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
4. You may further customize the position of the widget. Note the code highlighted in green. It depicts the position of the widget. The default coding places the share buttons to the top right corner. You may replace this coding with the following codes for different positions.
TOP LEFT - top:1%; left:1%;
BOTTOM LEFT - bottom:1%; left:1%;
BOTTOM RIGHT - bottom:1%; right:1%;
5. That's it!!! Save your template.
If you find the above tutorial little difficult or if you don't find the coding mentioned in step 1, then just add the code mentioned in step two on your "Design>>Page Elements" page as a "Gadget>>HTML/JavaScript". That's it. Save the gadget and view the result!!! I hope you enjoyed this tutorial. You may share your opinions via comments.
