Hide Google Related Bar On Your Website With CSS

fetchit-21

Update: The css method of removing / hiding the related bar no longer works. See the new (javascript only) fix at bottom of this post.

Google recently released a new browser extension for Internet Explorer and Google Chrome called Google Related. I’m sure it will be coming to Firefox soon.

The extension adds a bar to the bottom of some website which shows things like maps, video, images, reviews and related websites.

To get the bar to show at the bottom of your browser Google injects an iframe at the end of your body tag which is positioned with css to always sit at the bottom of your browser and has a high z-index to ensure it always sits above everything else on the page.

No longer working css fix

The beauty of Google Related using an iframe in your own pages html is that you can hide it using a single css declaration. For now it’s as simple as…

iframe.grelated-iframe {
	display: none;
}

…although in the future, if Google get wise to webmasters hiding their Google Related bar you may need to do something like

iframe.grelated-iframe {
	left:-99999px !important;
	display: none !important;
}

Update November 2011

<iframe frameborder="0" src="http://www.gstatic.com/webgps/grelated_0_6_9/html/grelated_bar_iframe.html" style="border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; bottom: 0px !important; display: block !important; left: 0px !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; position: fixed !important; right: 0px !important; top: auto !important; vertical-align: baseline !important; visibility: visible !important; width: 100% !important; z-index: 2147483647 !important; height: 49px !important; " scrolling="no"></iframe>

As you can see Google no longer makes it easy to hide the tool using css. They’ve ensured every css property you could use to hide the iframe is forced as !important.

The only option left (if you still want to hide the bar) is to use javascript to hide or remove the element.

I’m suggesting a setInterval incase Google does an update which keeps trying to reshow / add the iframe.
I’m suggesting ‘none !important’ because it’s the highest selector value you can add and least likely to be replaced by other css on the page or that Google choose to inject.

setInterval(function()
{
 var ifr = document.body.getElementsByTagName('iframe'), l = ifr.length;
    for(var a = 0; a < l; a++)
    {
        if(ifr[a].src.match(/^http:\/\/www\.gstatic/))
        {
            ifr[a].style.display = 'none !important'
        }
    }
},1000);

That javascript will check all iframes in the page once every second to see if it’s the pesky Google related bar by checking the url (which may need updating in the future!) and hides it if it does.

If you’re unsure of what to do with the javascript code, copy the JavaScript above and paste it into a .js file which is included on every page of your site, or copy the whole next code chunk and paste it just before the closing body tag of your page.

<script type="text/javascript">
setInterval(function()
{
 var ifr = document.body.getElementsByTagName('iframe'), l = ifr.length;
    for(var a = 0; a < l; a++)
    {
        if(ifr[a].src.match(/^http:\/\/www\.gstatic/))
        {
            ifr[a].style.display = 'none !important'
        }
    }
},1000);
</script>

If you use jQuery on your site then the following will do something very similar:

 
setInterval(function()
{
    $('body > iframe[src^=http://www.gstatic]').css({display:'none !important'});
},1000);

15 comments.

  1. [...] via – Harry Baily [...]

  2. Worked great. Thanks!

  3. I’m trying to get google related off of our site. I’m new at websites I was giving this site just to do price changes before our web guy passed away. Can you help me??? I’m not sure where to add iframe.grelated-iframe {
    display: none;
    } and do I add all of it?

    Thank you in advance.
    Kim

  4. Hi Kim,

    I have no idea how technical you are. Somewhere your site should have a stylesheet. This file will nearly always have a .css extension. For example style.css or site.css

    If you put

    iframe.grelated-iframe {
    display: none;
    }

    as the last thing at the bottom of your sites stylesheet you should be good to go.

  5. I notice that the “google related” toolbar is a little different on different websites. For example, on comcast.com, what is in this toolbar is “news” and “web” and nothing else.
    On other websites, the “google related” toolbar displays “map”, “web” and “related Places”.

    How is the content which appears on the “google related” toolbar being controlled? How do I eliminate the “related places” from the display, or do I have to eliminated the toolbar totally?

    Thanks in advance.

  6. Thanks for the info. Worked for me!

  7. Harry, any thought on new code that might work to disable this terrible toolbar? I removed it from a site a few months ago, but now it is back. So it looks like they changed something in google. I have tried your new code as well:
    iframe.grelated-iframe {
    left:-99999px !important;
    display: none !important;
    }

    with no luck. Any thoughts?

  8. Updated with a javascript fix. I’m afraid there is no longer (that I can find) a way to hide it with css due to their new plastering with !important values.

  9. where do you put the javascript?

  10. [...] annoyance of the google related bar is back. the code no longer works. Here is a workaround: Hide Google Related Bar On Your Website With CSS | Harry Bailey I haven’t tested this yet, too tired to try it now….will do tomorrow. __________________ [...]

  11. Google removed div and frame names and put everything to important which is why original code doesn’t work. With jquery the following code is working as of 11/15/11. We need to wait for the iframe to be created and then hide it by classname.

    $(document).ready(function() {
    setTimeout(function(){
    $(‘.notranslate’).hide();},1000);
    });

    NOTE: The code above won’t work. There is not always a ‘notranslate’ class on the iframe. – Harry

  12. sadly, it seems as if the “new” JS/jQuery code above does not work in IE. It throws a script error and does not hide the toolbar. It seems to work fine in Chrome though.

  13. Any updates on this fix? I tried both the java script and the jquery codes, however the Related toolbar keeps showing up :(

  14. Hello,
    I see you’re not using this code, however you site does not display this awful related toolbar? How do you do it? I know I might not get an answer :) , but it is worth a try :)

    anyway, this code works fine on my end. Thanks! bookmarked you website…

  15. Are you sure you cleared your browser cache? What browser are you using? What version? Are you seeing any error message?