11 June 2010

How to Make a Badge for your Blog

I did a lot of research on this several months ago, but never got around to sharing what I discovered. So, I will take this opportunity to reveal the fruits of my labours. I wrote this article, so you can copy the code from my site and then just input the information for your particular site. Once your values are input, you should be good to go.

As you may notice, the code below is in two sections. The first section contains the code for the clickable image that is displayed on your site. The second part of the code is for the text-box and the code your readers will use to display your badge.

Okay, once you have an image you want to use, let's get started...


This first part of the code, will link your image to your site...

<a href="YOUR WEB SITE ADDRESS HERE" target="_blank" 
title="YOUR BLOG TITLE HERE"><img alt="widget for 
YOUR BLOG TITLE HERE" 
src="ADDRESS FOR YOUR PHOTO GOES HERE" width:125px;height:125px; />
</a>


This is the code to make the box appear under your image. This allows other people to copy your coding and paste it on their site. When they do, your badge will appear on their site...

<readonly><textarea id="code-source"
onclick="this.focus();this.select()" rows="3" cols="15" 
name="mybutton"><a href="YOUR WEB SITE ADDRESS HERE"><img 
border="0" width:125px;height125px; 
src="ADDRESS FOR YOUR PHOTO GOES HERE" 
/></a></textarea></readonly>


  • Where you see: Width and Height, just enter the actual measurements of your image. This is not required, but it helps the page load a little faster

  • The Rows attribute will allow you to control the height of your box

  • The Cols (for columns) attribute will allow you to adjust the width of your box

  • The Onclick portion is a bit of code that will allow your visitors to just click your code and it will all be automatically highlighted for them; There will be no need for them to hit the "select all" button


Here's what the coding will look like with actual values. Feel free to copy/paste this code and just replace the URL addresses in bold, with your own...

<a href="http://mrmomsunite.blogspot.com" target="_blank" 
title="Everyday Living"><img alt="widget for Everyday Living" 
src="http://lh3.ggpht.com/_lUXXEQ0TG_0/" width:125px;height:125px; />
</a>
<readonly><textarea id="code-source"
onclick="this.focus();this.select()" rows="3" cols="15" 
name="mybutton"><a href="http://mrmomsunite.blogspot.com"><img 
border="0" width:125px;height125px; 
src="http://lh3.ggpht.com/_lUXXEQ0TG_0/></a></textarea></readonly>

Once finished, you should end up with a badge looking like this...


Minus the handsome cat, of course.
Please let me know if you have any questions and I will do my best to help you.

22 comments:

  1. Very cool. I've been wanting to redo my blog and maybe I'll make a new badge for it. I have one but it's really pitiful looking...lol I'm totally lost when it comes to code so it was wonderful of you to do all the work for us.

    ReplyDelete
  2. Grace: I use Photoscape (it's free). You get into the "editor" portion of the program and choose the photo or image and then scale it down to the size you want. I then upload that to Picasa (also free) and link to it from there.
    Once you have your image, you can then input the URL'S for your site and your photo in the code and you will create your button.

    Also, you are more than welcome to Email me the photo or image and I'll reduce it to the size you want and then I can Email it back to you.
    tahtimbo@hotmail.com

    Here's the link to Photoscape:
    http://www.photoscape.org/ps/main/download.php

    Ann: Thank you. It took a lot of looking around and experimenting before I was able to get it to work. There were about 4 or 5 different places where I was able to find all the info.

    ReplyDelete
  3. Ooooh thanks. just what I was looking for!

    ReplyDelete
  4. Katie: You're very welcome! Thanks again for giving me the idea to write about this :)

    ReplyDelete
  5. Could you make me a 125 x 125 new Entrecard if I emailed you the picture I'd like?

    ReplyDelete
  6. Karen & Gerard Zemek: Sure! I'll send you my address.

    ReplyDelete
  7. When I wanted to add a badge to my blog, I was looking all over the place for the code. This will be very helpful for people!

    And thank you for the kind words yesterday about Daddy Meow. All of the comments have been truly comforting.

    ReplyDelete
  8. I've been wanting a badge for awhile now but didn't know how to do it so thanks for this info! Now I need to upload my photo somewhere so I can actually do it!

    ReplyDelete
  9. What a wonderful post. Thanks for the tip. I always wondered how to make my own badge. I will have to try this.
    Have a wonderful weekend!

    ReplyDelete
  10. Your Daily Cute: Your welcome. I hope you are feeling better.

    BeadedTail: Your very welcome. I just use Picasa through blogger. So far, it seems to be pretty neat.

    Catherine: Thank you, just let me know if I can do anything to help.
    You have a great weekend, too. I think I'm going to try making bagels tomorrow...wish me luck :)

    ReplyDelete
  11. Great tutorial. Wish I'd had it a couple months ago. haha.

    ReplyDelete
  12. alicia: Thank you, that's the story of my life :)

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. Grace: Now I see what you mean. Yes, you put this code in a blank html gadget. You take the code on my site and copy/paste it there and then input you specific url's.
    Please let me know if this helped :)

    ReplyDelete
  15. thanks for this post, very helpful

    ReplyDelete
  16. Grace: I need to spell check more often...it should be your url's not you url's

    imelda: You're very welcome!

    ReplyDelete
  17. Good one! I didn't realize specifying the width and height help the page load faster. Good to know.

    ReplyDelete
  18. Nanny Goats In Panties: The theory is: when you specify the width and height, when the browser opens your page, it will see those measurements and it will set aside that area for your photo. It will then continue loading the page while opening the link to the picture.
    It's probably not a huge increase in speed, but every little bit helps.

    ReplyDelete
  19. Omg...this is great!!!!!!!!!!!!!! Thank you soooooo much! This really really helped me! :)

    ReplyDelete
  20. Hikaru-chan: You are very welcome! I'm glad this helped :)

    ReplyDelete
  21. Grace said...

    Where do you create this button?
    Comment edited to remove dead/broken link.

    Comment originally written on...12 June, 2010 13:13

    ReplyDelete
  22. Grace said...

    Sorry I had to delete my comment due to very bad typo.

    What I meant is where do you make this code? I mean do you make it in a word processing program, do you make it in some sort of notepad program, once you make it how do you get it on your blog? Do you choose a blank html gadget and put all this code in that? Do you see what I'm getting at? I already have a 125x125 pic in photobucket, re-sizing pics is not my problem, where the code is created is my problem LOL

    Comment edited to remove dead/broken link.

    Comment originally written on...
    13 June, 2010 12:12

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...

Google Analytics