Flying Spaghetti Monster ribbon thing

By popular request: how to get your very own nifty FSM corner ribbon thingy floating over your very own website. In five easy steps. [see it in action here]

1. Download this PNG file:

2. Upload the PNG file to your server of choice.

3. Add the following HTML code to you page, just before the closing </body> tag:

<div id="fsm" onclick="document.location='http://yourlink'"></div>

Replace yourlink by your favourite FSM link. May I suggest Wikipedia? Course I may!

4. Add the following CSS code to your page:

<style>
#fsm {
  position: absolute;
  right: 0;
  top: 0;
  width: 200px;
  height: 200px;
  cursor: pointer;
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://yourserver/fsm.png');
}
#fsm[id] {
  position: fixed;
  background-image: url("http://yourserver/fsm.png");
}
</style>

Replace “http://yourserver” with the location you uploaded the file to, e.g. http://site.typepad.com/images.

5. Save your page, reload, curse because you mistyped something, double-check everything, find the oversight and correct it—Hey presto! A floating transparent FSM thing on your web page!

Written while listening to: Michelle Shocked – The Texas Campfire Tapes – The Secret Of A Long Life (Is Knowing When It’s Time To Go)