If you’ve ever Googled animated blog widgets, you no doubt discovered enough sparkling, flashing, garishly-gross gadgets to make your blog as easy on the eye as Edward Cullen in a scrap-booking class. Slightly dejected, you might have abandoned the idea altogether… but what if instead you could customize your own unique set of widgets which actually match, which suit your blog, and which aren’t that difficult to make? Inspired much? Ever since I studied HTML at uni I was desperate to give animated widgets a go. After a friend of mine created one of the most beautiful blogs I’ve ever seen, I decided to try it and pass the instructions on.
Check out her blog first. Love the way the little envelopes open as you hover over them? It’s simple but gorgeous, and here’s how you do it.
(An interpretive .gif I prepared earlier).
- Create two images, one as a default, one for when your mouse hovers over it.
- Place the two images on a photo-hosting website, which will generate a URL for each image.
1. Design your widget image… Draw it, grab free stock symbols online or even take photos of objects you’d like to use – it’s up to you (I’ll do a post on turning photos into usable images later). Then decide on an animation, which should be simple enough that the main image stays motionless. For example, for each section of your blog you could have a book whose pages open, a flower with a leaf which pops out from the side – whatever.
A little side-note:
When creating your two images, the part of your widget that will remain constant must be in the exact same place in both files (and dead center, if you want a centered widget). So start by making a copy of your base image, and edit onto that.
2. Turn your created images into URL links… so that you can input them into your widget code. You need to sign up for a photo-hosting website and upload the images – I like photobucket for this, as it has some useful editing tools too.
One uploaded, you’ll find the Direct Link for each image (don’t lose track of which one belongs to which!)
3. Insert a ‘text widget’ in your blog’s design page… In the field which opens, input the code below, personalizing it where shown. Be careful not to delete any single quotation marks when customizing – without them it won’t work.
<div align=”center”><img src=”YOUR FIRST IMAGE LINK”
onmouseover=”this.src=’YOUR SECOND IMAGE LINK'”
onmouseout=”this.src=’YOUR FIRST IMAGE LINK'”/>
<a href=”THE LINK WHERE YOUR WIDGET SHOULD TAKE PEOPLE” target=”blank”><div align=center>YOUR LINK TEXT, E.G. Join 34 other subscribers…</div></a></div>
Whenever you’re creating HTML code, place the instruction target=”blank” within the same brackets as your link (as above), and it will open in a new window.
And the result… ta da!