JavaScript

Using FireQuery to Change Google Logo

Sam Deering
Share

jquery-google4

Hi guys, so today i have a bit of fun and customised Google to show my blog logo using FireQuery and some live jQuery code.

Firstly, I’ll assume you know how to install and use  Firebug and FireQuery.

Here is how I did it.

1. Load Firefox

2. Go to https://google.com

2. Load Firebug (click on the little bug bottom right)

3. Click jQuerify (to load jQuery to the web page)

jquery-google2

4. Inspect the page elements to find the id’s of the container of the google logo and a wrapper div to insert my new logo (i would have preferred to just change the “src” of the current logo but it is stored within a style background element so was easier to just hide it). The found the ids were “hplogo” and “lga”.

5. Type the following code into the console window and click “run”.

//hide the current google logo
$('#hplogo').hide();
//display my logo
$('#lga').append("");

jquery-google3

Hey Presto! ;-)

Please note that no hacking was involved here and I did not hack into google to change thier logo! It’s just a simple FireQuery example.