Fixed Floating Facebook & Twitter Share Button For Blogger

If your blog contains social bookmarking buttons then your readers have options to share your blog article after reading it.This sharing spreads your blog's link on various social networking sites and it helps your to increase your visitors.

Many of the other blogging tips providing blogs provides the social bookmarking buttons below your blog post by which your visitors first have to read the full article and then share your blog post if they like it.But today i am providing you a fixed floating facebook and twitter button which offers your visitors to share your blog post on social networking sites throughout the blog post and these buttons followed them as they read.

Isn't it cool widget for your blog's and this widget looks amazing if you want to see it then first click on the below image and see a live demo.

There are number of ways to position the buttons but i have found a very easy way that just involves adding code to a gadget on your layout/design of your blog.

Adding The Fixed Floating Social Bookmarking Buttons

Step 1)Login to your blogger account and In your dashboard Click on Layout/Design > Add A Gadget > Choose HTML/Javascript Gadget

Step 2) Copy The following code and paste it into the HTML/Javascript gadget.

<a href='http://www.tekleisure.blogspot.com'><img alt='Best Blogger Tips' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8TCzs1mWbyJZIHRijesLJzz0AClRnVlrCwMZyrvEY5xxaKEmnbtVEBbrIwvox54UY1ysFjlIJhwBvb7ZufDYerGxLSCah6qjWfK-_RVNeglWGjJagYezR0bQijc5pYO1-OsD8E-woq1Ql/s1600/best+blogger+tips.png'/></a><div style='position: fixed; bottom: 1%; left: 1%;'/>
<br />
<table border="0"><tr><td>
<script type='text/javascript'>
tweetmeme_url = &#39;<data:post.url/>&#39;;
</script>
<script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'> </script>
</td><td>
<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></table>
</div><a href="http://www.tekleisure.blogspot.com" target="_blank"><small>Get Floating Social Buttons</small></a>

Move Gadget Options

You can change the location of the buttons by modifying the code.The current position is bottom left as highlighted in the red color text.

Bottom: 1%; left:1%;

But If you have to pull the buttons in the following directions change this line with the following code.

1.) To pull the button bottom right.

Bottom:1%; right:1%;

2.)To pull the buttons Top Right.

Top:1%; right:1%;

3.) To Pull the buttons Top Left.

top:1%; left:1%;

Once you have the code entered or changed it as you want then save the gadget and check the result on your blog.

Let us know, What do you think about this tutorial!!!