Posted : Thursday, July 01, 2010 | Post Author : Paul Crowe | 14 comments
After writing the last post on social bookmarking i decided to look into creating floating bookmarking buttons.The buttons i wanted would be positioned in the bottom corner of the page and as the reader scrolled the buttons would stay fixed in position.At the time of writing i have the fixed social buttons on this blog in the bottom right corner.In case i change in the future you can see how they look on the Demonstration Blog Here.
I have used only Facebook And Twitter Buttons, Other could be added.
There are a 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 page.
Step 1. In your dashboard click ‘Layout/Design’ > ‘Add A Gadget’ > ‘Choose Html/Javascript’
Step 2. Copy the code below and paste it into the html/javascript gadget :
<a href=’http://www.spiceupyourblog.com’><img alt=’Best Blogger Tips’ src=’http://3.bp.blogspot.com/_rKG-ziTSNUQ/TQ5eV0U0EiI/AAAAAAAACik/xo2eFaDbfrE/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 = ‘<data:post.url/>’;
</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.spiceupyourblog.com” target=”_blank”><small>Get Floating Social Buttons</small></a>
You can change the position of the buttons by makeing a change to the code.The current position is bottom left as highlighted in red.
To put the buttons in the bottom right corner change like this :
bottom: 1%; right: 1%;
top: 1%; left: 1%;
top: 1%; right: 1%;
Once you have the code entered save the gadget and check out the result on your blog.
What do you think ? Let us know !

14 comments:
very nice
worked perfect
but i put in in the center
thanks
ReplyDelete
Thank you SOOOO much! This worked immediately and made my page look so much more professional. I’ve been scouring the internet searching for a way to do this. After many failed experiments I thought that maybe only really experienced web designers knew how to add this feature; certainly not someone who just start a company blog a week ago
This site is going to make my life so much easier.
Thanks again!
ReplyDelete
Glad to have helped Meredith..
ReplyDelete
Thank you! This was very easy to do. Just a question, though… are we supposed to change the code that has a link to your site/image?
ReplyDelete
This comment has been removed by the author.
ReplyDelete
thanks you very much this is working very good for my blog.
ReplyDelete
Thanks for the tip!! works like a charm!! is there a way to put the FB button right UNDER the tweet button though? I have found that the FB button runs into text on my blog as I scroll down.
Thanks!!
🙂
ReplyDelete
How can I change the logos from fb and twitter? thank you
ReplyDelete
hi, how can i make a floating button to have the “slide” effect when you scroll down? (as the floating menu in the left in this blog)?? thanks
ReplyDelete
Thanks a lot.
ReplyDelete
hiya, love your work! Especially the floating social media buttons you have on this post (tweet, like, share, g+ and pin it)- how is it possible to create one of my own? Thanks so much!
ReplyDelete
Thanks for sharing. However need your help.
I am looking for a share button like what you are having now. Tweeter, facebook, google+, stumbleupon and pinterest.
Can you guide me how to get it please?
I am only currently having fb, twitter and g+ on my blog here http://bigfatreality.blogspot.com
ReplyDelete
This comment has been removed by the author.
ReplyDelete
very nice
ReplyDelete