New Links: Get Firefox Ribbon

This script has been replaced by a much better version here. If you came here from another site please tell them about the new version. Thank you.

Bhell13 sent me a link to a site where they had a method for displaying a plug for Firefox if the reader was reading the site with Internet Explorer. If you're reading the site with Firefox you see nothing unusual. A nifty idea but it truly screws up the layout of his page for the IE browser. Some might say tough but a large percentage of our readers still use IE and the last thing I would want to do was prevent them from reading the site. After all the primary aim of this site is to provide a place for us to post interesting linkage not advertise Firefox - although we are always pleased to do so at every opportunity. ;)

In recent weeks I've noticed on various blogs the Make Poverty History ribbons and they are nice and unobtrusive. So I decided to do a bit of a remix of the two. New Links is proud to present the Get Firefox Ribbon! Below is a screenshot of what you will see if you view this site in IE - click for slightly bigger version.

The advantage of this method is that it will sit over the top of any content and not destroy the layout of your site.

To install this on your site find the </body> tag in your template (right near the end) and paste the following code just before it.

<!--[if IE]>
<style type="text/css">
.ffribbon 
{
 position:absolute;
 z-index:10000;
 left:0px;
 top:0px;
 height:199px;
 width:199px;
 background-color:transparent;
 margin:0px;
 padding:0px;
 border:0px none;
}
</style>
<img class="ffribbon" 
 src="http://slackdaddy.org/gif/browsersucks.gif" 
 usemap="#ffmap" />
<map name="ffmap">
 <area shape="poly" 
      coords="0,163, 0,198, 198,0, 163,0" 
      href="http://getfirefox.com/" 
      alt="Get Firefox!" />
</map>
<![endif]-->

A couple of things to note. The ribbon graphic is being stored on MSN Groups (oh the irony!) and because of that the URL is very lengthy and would not have fit in this post. I've made a tinyurl for it and used that in the code above. Because of the combined time of the redirect by TinyUrl and the sometimes slow response time from MSN groups the image can take a little while to appear. This is the reason I suggest pasting the code right near the end of your template as it will not disrupt the page loading at all.

Of course if someone wants to offer alternative free hosting for the graphic (I use MSN because it's free with no transfer cap) or indeed a better graphic (which wouldn't be hard!) feel free to let me know and I'll change the script accordingly. You can of course use the graphic on your own host and change the URL yourself.

More NewLinks hackery? Try Adding Technorati Tags To Blogger (click the icons on the top left of this post to see what they can do) and Adding On This Day In History.

EDIT: I'll be pointing this script at a different host tomorrow (Friday) thanks to Hypersloth so the speed should improve - this will also allow you to place the code nearer the front of your template as it shouldn't interfere too much with everything else loading.

EDIT 2: The graphic is on the new host now.

EDIT 3: Italian version here.

EDIT 4: Much nicer ribbons available at Maya's blog. Thanks Maya! :)

EDIT 5: So how popular is this thing anyway?

This work is licenced under a Creative Commons Licence.