Wednesday, May 25, 2011
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.
Upload your button (I use TinyPic) and grab the direct link UR (for example, http://i54.tinypic.com/igam9d.jpg).
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.
You can see my final code below.
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!
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!