This page has moved to a new address.

Animation Friday - How to: Make an Animated HTML button

My Poppet : your weekly dose of crafty inspiration: Animation Friday - How to: Make an Animated HTML button

My Poppet : your weekly dose of crafty inspiration

Friday, 25 February 2011

Animation Friday - How to: Make an Animated HTML button

Ok I've been promising this one for a while, so thanks for being patient.
I must preface this with saying, I'm no computer geek or code writing expert, this is just knowledge I've gathered by researching on the web. If you have any questions I probably can't answer them so don't even bother asking - Just google it.

I've recently made some ad buttons for various lovely blogs, here is one of my favourites.

The beauty of having a HTML coded image or animation is that clicking on it will take you through to the website you choose, in this case my shop.

So here is the code you need

<a border="0" href="http://your web address here" target="_blank"><img
src="http://your image url here" /></a>

Your web address is the website you want the button to click through to, like your shop or blog

Your image url is the url(web) address of your hosted image or animation. You can either host it on your own website (blogger doesn't allow this but I think Wordpress is able to), on photobucket or when you create a gif file via picason, they are hosting for you when you copy the url address.

Your image must be your final desired size when you grab the url, this code does not allow for resizing later. Most side bars on blogs are 150-200px wide so don't make your image wider than this.(Mine was bigger to fit a specific ad spot)

The button will default to the left, so is ideal to use in a sidebar.

If you want to share your button like this

You can get the code and instructions from Shabby Blogs, there are other great tutorials and buttons you can grab too.

To make your animated image, my tutorial is here. Remember to choose the size of your animation as this will be your finished button size.

Now have a go. I hope my instructions were clear. Ok I'll let you ask questions but i can't guarantee I'll know the answer.

No linky today, but I'd love you to leave a comment if you use my tutorial, leave your web address so I can see your finished product.

Labels: ,