Support The CoffeeShop Blog!

Search The CoffeeShop Blog

Wednesday, May 25

Blogger UnWrapped: How to post a floating button on the side of your blog!

Today I want to show you how to make a floating button on the side of your blog as seen in the screenshot above (and on my actual blog). This button will stay in place even as you scroll down your blog, and you can link your contact information, website, Facebook or other social networks, a page, etc. You can also make more than one.

NOTE: If someone is reading your blog on a small screen, the buttons might end up floating on top of your blog, covering up your text and annoying your readers. So if you install these buttons, try to keep them small and be aware of this issue! The other option is to put the button on the bottom of your blog.

CoffeeShop Floating Blog Button Tutorial!

1. Make or find a image for your button. I made my button in Photoshop. This button is 27px by 148px, but you can make your button as big or small as you want. If you want a transparent background like my button, you will have to save it as a .png. Download a sample Contact Me button you can customize here.

2. Copy the code below and paste it in Notepad (a free program on PCs that is great for editing HTML and javascript). When you edit you can go to Format, and check Word Wrap. However, when you are finished and ready to paste the code on your blog, uncheck Word Wrap before copying to avoid any weird spaces in your code.

3. Replace the #1 with the URL you want people to go to when they click on your button. For my Action Install button I would paste http://www.thecoffeeshopblog.com/2007/09/installing-coffeeshop-actions.html.

Replace #2 with any text you want seen when someone hovers their mouse over your button (in my case it says PSE action installation tips and tricks!). If you don't want any text be sure to delete the #2 in the code.

Replace #3 with the URL of the direct link of your button image you uploaded in Step 1.

4. You can adjust the placement by playing with the Position code. I originally placed my button 10 px down from the top. I also play with putting the button on the bottom (like it is right now), so if you want to do this simply change TOP in the code to BOTTOM. Simple!

Once you are finished tweaking your code, go to Layout, Page Elements on Blogger and click on "Add a Gadget" and select Html/javascript and paste it in. Make sure you unchecked Word Wrap in Notepad before copying the code. Save the code and your beautiful button should be up on your blog!

I hope you found some use for this little tutorial. I have wanted to install these buttons for the longest time but I wasn't able to find an easy tutorial. After googling like mad I was able to finally figure it out. Perhaps this will save you some time!

great tutorial and i can't wait to try it but then again i am one of those people with a small screen so it floats over the texts and does quite often annoy me as i have to scroll as i read so it doesn't hover over the text. I will try it on DH's laptop or his computer as his monitors are bigger than mine. Thanks again

My apologies Rita...I always view at 125% since I'm old but have discovered that at 100% the tab doesn't obstruct the blog post!I've noticed others at 125% that don't obstruct, so that was my point of reference!

CoffeeShop Links

Follow The CoffeeShop Blog!

Welcome to my blog!

My name is Rita and I am a work-at-home/homeschooling Mom to two amazing boys (Duke is 14 and Imp is 11) in Texas and passionate about photography and photo-editing.

If you love using my free CoffeeShop creations and would like to make a donation to Rita the self-professed geek of CoffeeShop, please follow this link! This blog is possible because of your generous support.