Wednesday, May 25, 2011

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.

Upload your button (I use TinyPic) and grab the direct link UR (for example, http://i54.tinypic.com/igam9d.jpg).

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.

<div style="BORDER-BOTTOM: 0px; POSITION: fixed; BORDER-LEFT: 0px; BORDER-TOP: 0px; TOP: 10px; BORDER-RIGHT: 0px; LEFT: 0px"><a href="#1" title="#2"><img border="0" src="#3" /></a></div>

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.

<div style="BORDER-BOTTOM: 0px; POSITION: fixed; BORDER-LEFT: 0px; BORDER-TOP: 0px; TOP: 10px; BORDER-RIGHT: 0px; LEFT: 0px"><a href="http://www.thecoffeeshopblog.com/2007/09/installing-coffeeshop-actions.html" title="PSE action installation tips and tricks!"><img border="0" src="http://i56.tinypic.com/16lfqd4.jpg" /></a></div>

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!

13 comments:

  1. Thanks for that little bit of inspiration. I had never thought of using the gadgets in that way...

    ReplyDelete
  2. Hi Rita, DON'T POST...JUST MY OPINION

    I'm not a fan of the floating button. It interferes with my reading of the post and has interfered w/my clicking on a link. I got the install page instead of the one I wanted.

    It looks great on the banner, and, in my humble opinion, would work if it was in the margin with no text.

    All that said, thanks for sharing your incredible expertise.

    Betty

    ReplyDelete
  3. Hootnonny, thank you so much for pointing that out and I added a disclaimer to my post. ♥

    I think these buttons can be great, but you have to make them small so they won't interfere with those readers who have a small screen.

    Rita

    ReplyDelete
  4. 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

    ReplyDelete
  5. Thank you!
    I love learning how to do new things. I'm just starting to learn HTML, so this is great.

    ReplyDelete
  6. Thank you so much for this post. I want to let you know that I posted a link to your blog in CBH Digital Scrapbooking Freebies, under the Page 4 post on May. 26, 2011. Thanks again.

    ReplyDelete
  7. Great idea! Thanks for sharing. :)

    ReplyDelete
  8. 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!

    ReplyDelete
  9. I've always wondering how to do this! Thanks for sharing. Your blog is always a great place to come and learn. Now to actually do it....

    ReplyDelete
  10. Thank you so much for this amazingly simple tutorial! I have always wanted these on my blog and now I have them! Thanks, Rita!

    ReplyDelete
  11. Thanks a lot, you make my blog so much pro!!!

    ReplyDelete
  12. Thanks so much for this!
    I've used it twice for my webcomic - once as a button link to my store, and another time to create a vertical social sharing bar. Worked like a charm.

    ReplyDelete

Thank you for taking the time to leave a message, I love reading them! All comments are personally moderated by me and I will post and answer them them as soon as possible.
Rita