Wednesday, February 18, 2009

How to Make a 125 by 125 Button Ad

With ads in blogs and project wonderful becoming so popular it’s important to have one of those square clickable ads that you can insert. Project Wonderful makes it easy, you just need the art, they put the link with it. But what if you want to put an ad on your own or a friend’s blog?

I figured that this couldn’t be too hard and instead of paying for it I thought surely I could find out how to do it if I spent enough time.

After googleing several different times and reading several different posts and “free” websites that I came across I did indeed find two posts that when combined made sense of what to do. Since I didn’t know the first thing about it I will explain it from the very basics.

You need an image you like for the ad. I used a product picture that I took. I inserted text for my store name and cropped and resized it to 125 square. I use Irfanview, a free software available on the internet, for this but there are lots of other softwares that do the same thing. There are two parts of the ad process.

1. You need to park this image on the internet somewhere that is always “on” - a host for the image. I used photobucket, you could also use flickr or a similar service. You need to make sure that they give html code for the image when you save it. In photobucket it is the third of the four lines they give you underneath the image in your album.

2. You need to write a string of code that includes this HTML for the photo and the url of the site you want to go to if you click on the picture.

This string of code is what you insert in the HTML add a gadget field on blogger or other blogging sites.
The string will look something like this:

Replace the caps with your information. This is what mine looks like for the retrochique button

LOCATION OF THE IMAGE FILE….is the HTML line from photobucket.

The first time I did it I copied and pasted in word until I thought I had it right and then copied and pasted the code into my blog. I was really happy when it worked!

Please leave a comment if you found this helpful. I will post about how to animate your gif button (make it flash different images) next week.


  1. Thank you!!! This method is so much easier than what I have been doing!!! Also if you write a GIF flash ad, they will come!!! ;-)

  2. This is fabulous! Thank you so much for the tutorial. I am slowly learning about blogging and love all the little tidbits like this that I can find!

  3. wow, thanks so much! so helpful especially the way you explained it.

  4. Today is a very big day in the Where’s Wenda? Contest. I am visiting all of the SITS followers. Can I do it? There are around 1000 followers. Oh my! Better grab my cup of coffee and get on my way. Be sure to visit Hot Chocolate Caramel Mocha and Three Bay B Chicks as part of your contest entry.


  5. I was just wondering how to do this the other day! Thanks for the info, I'm still a little confused about the html thing, but maybe it'll click...

  6. Thank you - the easiest explanation Ive read all day - and at least abe to try the coding.