Thursday, February 03, 2005

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.
Creative Commons License

22 comments:

Merg said...

I fired up IE to give it a shot. It's been running about 10 mins so far and it's still waiting for the graphic to download...

mmChronic said...

Works for me as you can see from the screen shot! ;)

The whole page is loading v slow for me atm and it is the very last thing requested and loaded so might take time.

Merg said...

perhaps later I'll profile it and work out what's so slow. I guess I should double-check it's not some of my draconian anti-ad-crap blocking, too.

Merg said...

oh, yeah... forgot to mention -- I've used the IE-conditional stuff and js in the past to enable proper alpha on PNGs in IE.

(having to use crufty hacks like that is one of the many reasons I rant that IE is a piece of crap...)

mmChronic said...

Yeah I've seen the png hack. Ridicolous that you have to bugger about like that. But it's only one of many hacks needed to get stuff working IE. There's a few in our CSS.

Merg said...

Indeed. Pile of pants.

hypersloth said...

I've uploaded it to here -
http://slackdaddy.org//gif/browsersucks.gif

*Note - I previously had image hotlinking disabled - I've enabled it again, but it said it "should be enabled within 24 hrs"
Lemme know if you use it, and if it's any better.

btw, that's funny as hell; I'll be using it, thx.

mmChronic said...

Cheers Hypersloth. I'll leave it 24 hrs and change the script then just to make sure.

hypersloth said...

Actually, it's already working on mine, so I went ahead and disabled it again, and it still works... Weird. I knew I'd linked to pictures on that site before, and never had a problem - I like to have somewhere I can keep 'em, other than my main site - I wonder why it didn't block it.

Whatever, I'll keep checking, and if for some reason it stops, I'll change it again...

Anyway, change it now if ya like, should do fine.

mmChronic said...

Yeah works a treat - definitely faster too. Cheers again! :)

Merg said...

Greatly improved!

ILuvNUFC said...

Tee hee. Class hackage.

I've put it on my blog and i will do a post about it later and link to this post.

bartokk said...

Great! I added your code on my site

Eh... Not so much said...

This is awesome! Just added it to my blog!

Anonymous said...

Oh shit. You morons. The "Poverty" ribbon was about doing something meaningful for humanity.

You are dissing people for not picking a geeky enough browser.

Please get a life.

mmChronic said...

We aren't taking anything away from the Poverty ribbon - in fact they've probably had a lot more hits from people that may not have seen it as I did link them.

And I'd hate to think the Make Poverty History people have exclusive rights to such an idea - after all I've seen plenty of prior art with diagonal ribboned strips in the corner of something and I've seen (and written) plenty of things that float above a page.

As I pointed out the graphic can be changed to be something less in your face immature so it needn't even be dissing - in fact someone has changed the wording for the Italian version. We've dissed people for a lot less than using a 'geeky' browser on here before so a tongue in cheek message worked for me.

If you use a browser that isn't the hacker's wet dream, IE, then you never even see this message. I am doing them a favour.

My life's a very nice one thank you. Oh and you don't have to be anonymous you know - but I guess you prefer it that way as it is made quite obvious on the comment page.

Maya said...

Posted about this on my blog, along with 2 alternative graphics :)

blogdollar2 said...

hi, i am learning about blogs and like what you did in yours, I have a blog about how to's. PLease come visit.

Ricardo said...

Check out my blog,
Love the ribbon ! thanks

Deep Thapa said...

bingo sites bingo casinos bingo websites hoodia prices hoodia prices online credit history internet credit reports credit reports online check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history

Deep Thapa said...

check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history check credit history

Adi said...

Oes Tsetnoc one of the ways in which we can learn seo besides Mengembalikan Jati Diri Bangsa. By participating in the Oes Tsetnoc or Mengembalikan Jati Diri Bangsa we can improve our seo skills. To find more information about Oest Tsetnoc please visit my Oes Tsetnoc pages. And to find more information about Mengembalikan Jati Diri Bangsa please visit my Mengembalikan Jati Diri Bangsa page and other update like as Beratnya Mengembalikan Jati Diri Bangsa, Mengembalikan Jati Diri Bangsa di perpanjang and Jangan Berhenti Mengembalikan Jati Diri Bangsa. Thank you So much.

Oes Tsetnoc | Lanjutkan Mengembalikan Jati Diri Bangsa