Friday, December 28, 2012

How to add a badge that links to a friend's blog

So you have a group of friends who all sell stuff or make stuff or share common interests. You want to share your cute little badges with each other to create a way for your readers on one blog to find all the rest of your friends.

 Here's how to do it. 

Things you will need.
Badge image or photo
Hosting space for image
Links to your friends' blogs

  1. You already have the badge/photo you want to use (if not, there will be another tutorial for that soon). 
  2. You need to have it "reside" somewhere on the internet so that your blog can serve it up to viewers. There are lots of free image hosting places.,, and my personal favorite for image storage, are just a few to choose from. 
  3.  Upload your badge to your hosting place and get the link to your image. This is the link you will give to your friends so THEY can show your badge on THEIR blog. In order for you to show theirs, you will need a) a link to their image and b) a link to their blog.
  4. Now you have the images/links you need, go to your blogger dashboard and click on Layout

  5. Next click top right to "Add a Gadget". This will give you a popup window with lots of gadgets to choose from.

  6. Choose the one that says HTML/Javascript.

  7. You will get a screen that looks like this:
  8. The title you enter will be the title of that section of the right column of your blog where you are going to display your badge collection. I recommend using just one gadget to display all of your friends' badges. Keeps it neater and shorter that way. :)
  9. Here's the tricky part. You need to enter HTML here and you are going to need both the image link and your friend's blog link. This will be the format you will use, and just replace the bold text with the respective link...

    <center><a href="" target="_blank"><img src="" /></a><br /><br /></center>
  10. Click the button to save your gadget and you're done!

Add more friends' clickable badges to this gadget by editing the gadget, then copy/paste all of the code you just used from above to make this first badge, and paste it above or below the other one. Change out the image links and blog links same way you did the first time and then save again.

You can change where your badge appears by dragging it around the layout screen and dropping it.


  1. Now go make your badges so I can add them here. :)

  2. yippee !! I'm saving this as a reference guide...thanks so very very much for adding my badge to your page...I'm following you now...send me a code to add your badge to my blog...
    xxoo Camille @ SSGS

  3. You've been nominated for a Liebster Award <3


Thank you for taking time to leave your thoughts about my blog post. Your comment will show after I have given it the once over checking for spam. Spam adds nothing to the conversation, nor does it add anything to a gourmet meal.

Once I'm certain it's spam free, it'll go live and your words will live in infamy. :)

Thanks for playing along.