Wednesday, December 16, 2009

How to have a "Grab My Badge"

15 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!

15 Responses so far.

  1. This was nice of you to do!

  2. Anonymous says:

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

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

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

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

  6. Anonymous says:

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

  7. Unknown says:

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

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

  9. Unknown says:
    This comment has been removed by the author.
  10. Unknown says:

    Thank you!! Can you tell I'm excited?

    Jodie
    http://sidhinews.blogspot.com/

  11. Helma 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!

  12. Thanks so much for this info!

  13. Anonymous says:

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

  14. Ross Shan says:

    Great Blog! This post gives a better idea. Thanks for the useful information. You can also check our blog : Custom badges

Leave a Reply

Thanks for commenting!

Labels

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

Graphics by Parajunkee Design