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).

Simple Overview:

  • 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.
  • Place those links into some simple HTML code (unfortunately you’ll need the upgraded WordPress to do this, as the standard doesn’t support Javascript).

Step-By-Step Guide:

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!)

Photobucket URLs

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.

Widget How-To

Customize this!

<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>

Handy tip:

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!

Compaing Scroll Widget

To see this widget in action, take a trip down memory lane to my old blog, http://beyondthehourglassbridge.blogspot.com.au/