So, I had a look at a site and saw some cool buttons floating on the left hand side. I thought it would be nice if I could replicate the same effect on my site. At that stage I currently had a floating Twitter badge and even posted about how how to get it on your site.
Anyway, as being curious about how they achieved it, I checked out their css file and browsed their source code. I seem to do that a lot when I find something cool. After a few trials and error, I came up with the following details and thought of sharing it with you all.
I have tested this on Firefox 3.5.2 and IE 8 and it seems to be working 100%.
From the image below, you can see I have icons for Twitter, RSS via email, my contact page, LinkedIn, Skype and then to login into Serradinho. You can put any icons there and have them linked to what ever site you need. Just take the basis of the code and manipulate it as you want to.
Floating Icons on side of website
You can copy the CSS into your custom.css file or what ever file you are using for your css styling. Just a small note if you want to change the side it’s showing on. Yes, I checked that out too as I’m sure I will get asked that 
If you want the icons on the right hand side of your site, then all you have to do is change the ‘left’ to ‘right’ in the first line of the css styling. That’s it!
You can copy the function into your custom_functions.php file. If you are not using Thesis, then I suggest you find a way of adding it to your current theme. More links can be added or you could install a great WordPress plugin that adds social profiles to the side of your site.
Download:
Thesis Tutorial - Floating Icons on the side of your site
The download was made available on 25 November 2009 and is in zip format. The file size is 982 bytes and has currently been downloaded 298 times.
I have copied the CSS and PHP details and zipped the file, download it now and try it out today or even at another time.
Final Thought
I hope you have enjoyed this small post, but I just wanted to let you all know how I did it. If you have any queries, please let me know. Would like to know if you implement this onto your site.
Other Interesting posts that you might want to also look at. I have only listed a few below, so browse some more.
- 6 Tips to Top Google Search Results
- Content Copywriting: The Powerful Influence of Positive Words
- Sponsor A WordPress Theme & Promote Your Website
- Code Snippet Tutorial – Display Time Span of WordPress Post
- Serradinho Blog finally has Google Sitelinks
- Top 5 Free Ways to Promote your Blog
- SimpleHomeTips.com domain for SALE
Article by George Serradinho
I am the proud owner of Serradinho.com and have made this my second home. I'm into blogging, downloads, WordPress and the internet in general. I also love meeting and helping others and learning new techniques.
George has written 756 awesome articles.
View all posts by George Serradinho, there might be other posts that interest you.
Subscribe to Serradinho feed and get updates via EMAIL sent directly to your inbox.
This blog is using the Thesis theme & WordPress blogging platform. Customizations on this blog have been done by myself.
I currently freelance as a part-time web designer whereby I offer a variety of web related services. You could alternatively browse through my portfolio for examples of work completed.
Below are a few of many ebook downloads that I have made available. Alternatively, you can view my download posts to see what else I have to offer.
- eBook - 3 Steps To Newbie Success (40)
- eBook - 30 Ways To Get Free Traffic In 30 Minutes Or Less (61)
- eBook - On The Double Product Creation (32)
- eBook - The Ins & Outs of Affiliate Marketing (39)
- eBook - The Basics Of Search Engine Optimization (46)
- eBook - Are JV Giveaway Events Good For You? (44)
- eBook - Offer Free Phone Support To Your Website Visitors (45)
- eBook - Instant Product & Fast Traffic (80)
- eBook - Email Marketing Magician (84)
- eBook - How To Effectively Manage Your Anger (42)
{ 46 comments }
Too bad I don’t have a Thesis theme right now… I might buy a thesis theme for my EPN site.
Benjamin Cip´s last blog ..I’m Running A $20 Logo Contest On Digital Point Forum
@Benjamin Cip – you could maybe adapt it for other themes as well. I have not tried, but it should be possible.
Thanks George for posting this… Putting up on my blog right now..
Compute Live´s last blog ..How to Fix HTC Hero Sync Problem in Windows 7
@Compute Live – I see it’s already up. If you are not using the other links, then you can remove them or replace them with others.
Yes I am planning to replace them with other badges..
Compute Live´s last blog ..How to Fix HTC Hero Sync Problem in Windows 7
@Compute Live – thanks, I’m changing mine already.
I think you should go for smaller icons.. because on a lower screen resolution the icons will appear over your blog space..
Compute Live´s last blog ..How to Fix HTC Hero Sync Problem in Windows 7
@compute Live – thanks for the heads up. I’m still debating on the icons to use.
lol… I can see that
Compute Live´s last blog ..Free Batman: Arkham Asylum PC game with Nvidia Graphic cards
Excellent – just what I was waiting for, thanks
Where did you get the icons, are they allowed to be copied (for us)?
Klaus @ TechPatio´s last blog ..I Luv’ CommentLuv – do you have it on your WordPress blog yet?
@Klaus – I see the icons are now being used all over. It’s no problem as I will probably change mine a bit so that it’s not the same. I would like mine to be different if possible.
Excellent job.
This integration can save our valuable space on the blog and looks very nice.
Surender Sharma´s last blog ..How to Tweet Your Blog Post Automatically on Twitter
@Surender – no problem, trying my best to help others as I go along.
Thanks for sharing . These icons will surely look nice. I will give a try .
Ruchi´s last blog ..Long Distance Relationship
@Ruchi – no problem, enjoy
They are really cool.. but unfortunately I don’t have Thesis theme .
Nehh´s last blog ..Heidi montag in bikini
As George wrote above you should be able to adapt it for other themes as well. With that said I highly recommend you to try Thesis. Well worth the money.
Stefan´s last blog ..How to Backup and Restore Your Wordpress Blog
@Stefan – all themes have a functions file, you will just have to see how you can incorporate it into your current theme.
@Nehh – sorry to hear that. You might be able to do it with your current theme.
I was actually thought of mailing you to ask this. I’ll read the whole post later when i reach home and will mail you for help
TechZoomIn´s last blog ..50 Points Checklist to Improve Your Blog
@TechZoomIn – not a problem, mail me and I will see what I can do for you.
Thanks so much George! I will do this in the next few nights. Thanks for providing all the code so I just have to copy/paste.
Christie´s last blog ..MiscBytes unusual niche of the month
@Christie – no problem, thought it would be nice to show others how I did it.
George, each time I read one of your EXCELLENT Thesis customization posts it makes me want to go out and buy it. I am sure I eventually will, but I have too much stuff going on right now. I need to get it when I have some free time to play around with it.
Doug Dillard´s last blog ..Win an Awesome Custom Banner Package
@Doug – let me know when you do decide on getting it, I will help out where I can. There are so many things one can do with Thesis.
Thanks for the little trick, George. Your floating icons are pretty cool!
Jacob Yap´s last blog ..A Review of the Godlike Thesis Wordpress Theme
@Jacob Yap – glad you like them, I struggled to get the right icons and all, I could not make up my mind.
Brilliant. I think that is very professional looking, and has a certain beauty about it. Thanks for your share once again, Serradinho.
Always very helpful.
Ana´s last blog ..An old sketch taps into delight
@Ana – no problem, glad to have helped you.
Looks real good man! I like it a lot. Oh by the way I like the cartoon image of you looks just like you which is awesome.
shaunjudy´s last blog ..Link Love Tuesday 8-25-09
@shaunjudy – thanks for that, the cartoon is similar to me
I was wondering how you did that George, even commented in that last post about it.
Damn Thesis
I might have to give in and have a new theme made.
Extreme John´s last blog ..The Copycat Company
@Extreme John – No Way, your site is awesome, very unique. I love it
Great tutorial that was easy to follow. I have it on my site but it only shows with Firefox and not with IE? Any thoughts on why it wont work with IE?
@barry – when I checked it was on both IE and Fx, make sure you have the latest version of IE. It could be that you are using a very old version.
Hi George
Can I use this in mine blog..Actually I do have Ggl Ads in mine sidebar..so can i use these floating icons too in sidebar..
A silly question but I do fear that interrupting google ads in this way might not be against Adsense policies
Atul´s last blog ..Contact Google-Complete List of Google Contacts
@Atul – try and let me know if it works or what the outcome is.
Thank you. I have been searching for something like this. This will definitely help in creating some room on the sidebar since this icons will float now.
Tatesjourney´s last blog ..The hotel I stayed in
@Tatesjourney – yes, it will create more space and hopefully a better final look
Hi George,
Thanks for the tutorial, but I seem to be having trouble and can’t get it to work. Any chance I can get a hand if you get a second?
Thanks in advance,
Mike
@Mike – let me know what the problem is and I will see if I can help out
Ok, I added the information that you put up above to my custom css file and then the custom_functions.php, but after I did both, I saved and had an immediate error that said there was an error on line 44 (I believe) and then I had to upload the old cust0m-functions.php file to get the site working again.
Mike
@Mike – have a look at the code when you have inserted my details as it should work. How did you copy the code? Did you check the code before saving that all is correct. I find that sometimes if not copied correctly, it will give errors.
i used the copy to clipboard function. it looked like it copied everything.
No problems happened when I pasted the CSS code, but didn’t work when i copied the custom_functions code.
Thanks, somehow I figured it out. Like you said, it must have been a transfer problem
I do have a couple other questions though. How do I create similar icons to my social networking sites you have on the left? And, how do I make sure that when someone clicks it, it pulls in the blog post information for sharing?
Thanks again.
Thanks for the floating tips. Very interesting stuff, and seems simple.
Kewl Kat
KewlGadget 4 Great Gifts´s last blog ..Multi-Directional Drive Car – The Nissan Pivo 2
{ 5 trackbacks }