What you will need to complete this project:
1. An image manipulation program ( I like Gimp 2.0, it is a great free program)
2. An image that you would like to use as your button.
3. An image hosting program, photobucket works well.
4. The HTML code for your button
5. and your web blog publishing tool, such as Blogger.
To begin you will need to open your image manipulation program and create a new image. The image should be set to a standard size of 125 pixels x 125 pixels. At this standard size your button will fit into a blog side bar without running over onto the main text of your blog.
Once you have saved your image, open your photohosting site.
select your .jpg and upload it to you photohosting site.
If your using photobucket, you will notice a box to the immediate right. This box contains the direct link that you will need to create your clickable button.
Now that you have your direct link established. It is time to concentrate on creating the HTML gadget that will create your linkable button.
- Copy the direct link created in your photo hosting program (http://s1121.photobucket.com/albums/l504/Shop123/shop%20123/ )
- Copy your shop address (shop123.etsy.com)
This is the HTML code needed for your button. Insert you shop address into the location in red. Insert you image direct link into the location in blue.
<a href=" http:// YOUR SHOP NAME GOES HERE/"><img src=" http:// PHOTOHOSTING DIRECT LINK INSERTED HERE.jpg" /></a>
your finished code should look like the example below:
<a href=" http://shop123.etsy.com/"><img src=" http://s1121.photobucket.com/albums/l504/Shop123/shop%20123/ " /></a>
I usually work with my HTML code in a word document. Once I have saved the changes in Word, I open my blog site to create the gadget.
In Blogger, for example, click on the "Design Tab" to access your page layout. Within the page layout click on the location where you would like to add you gadget.