Wednesday, December 16, 2009

How to have a "Grab My Badge"

14 comments
I've gotten a few questions on how to add a grab my badge/button link in the sidebar.  It is really very easy to do if you have some basic HTML knowledge.

First off you have to host your button/badge on a third party server such as www.flickr.com

  1. Once you have your image hosted, get the URL: http://farm3.static.flickr.com/2695/4190373200_e20fa291a5_o.png
  2. Go to blogger dashboard and insert a new HTML/Javascript widget
  3. Title Your Widget - i.e. Grab my Badge!
  4. Within the content you have to tell blogger what image to display and where to link it to. Here is the sample code:
<a href="http://parajunkeedesign.blogspot.com/"><img border="0" width="90%" src="http://farm3.static.flickr.com/2695/4190373200_e20fa291a5_o.png"/></a>

In the first highlighted that is where you put your URL.  The a href= is the HTML code link.
In the second highlighted area that is going to tell the browser what image to display.

ALWAYS remember paste your code between the " " marks.

5.  Now it is time for the textarea code

<textarea id="code-source" rows="3" name="code-source"><a href="http://parajunkeedesign.blogspot.com/"><img border="0" width="90%" src="http://farm3.static.flickr.com/2506/4125657740_8bd542db80_o.png"/></a></textarea>

The area highlighted is the same exact code that you worked in early, just wrapped in <textarea> tags.

6. What you need to know about the extras:
  •  I have the width set at 90% within the code.  This is so my button doesn't overpower someones sidebar.  If the width is set at 90% you know your button isn't going to be bigger than anyone's sidebar.  This has a downfall though, people with very large sidebars, it might stretch your image out and distort it, but I take the risks, because the majority of sidebars don't surpass 250 pixels.
  • Secondly I have it set to border=0 this is so a border will not appear around my button and ruin the look of it.
This should be it, if you have any questions, just let me know!

14 Responses so far.

  1. Wow, that worked! I feel so tech-saavy. Thanks a million!!

  2. Patti says:

    I wish I would have seen this before I made my button!

  3. bubbleboo says:

    Thank you *so* much for this - I never would have known how to do this before I found your tutorial! Thanks for taking the time.

  4. Super says:

    Thank you for explaining this! You made it so easy.

  5. DarkTouch says:

    Thank you for this. It made me look smart to someone else.

  6. Sherri says:

    I just did this for my button and you made it very easy. thank you for posting these awesome tips.

  7. Help! I’m doing something wrong..the link doesn’t work, it says my page does not exist….I don’t know what I did wrong….it’s my button on the top of my page at http://booksavvybabe.blogspot.com

  8. This comment has been removed by the author.
  9. Thank you!! Can you tell I'm excited?

    Jodie
    http://sidhinews.blogspot.com/

  10. Hermia says:

    Oh.my.God.
    It work! Finally! I've tried this so many times and now i have a button! Thanks for this great tutorial!

  11. Thanks so much for this info!

  12. AHH!! So much usefulness! I cannot WAIT to create my badge!

Leave a Reply

Thanks for commenting!

Labels

 
Parajunkee Design © 2011 DheTemplate.com & Main Blogger. Supported by Makeityourring Diamond Engagement Rings

Graphics by Parajunkee Design