Adding Google Translate Widget and Hide Banner & Logo

Digital Hints 4:54:00 PM
Adding Google Translate Widget and Hide Banner & Logo It's easy if you want to add the widget to translate your website, so that your website is formed as a multi-language website. For setting up is easy, because Google has been providing translation widget which can be installed in all types of websites.

Here's how to add a Google Translate widget on your site, perform the following steps:
  • Go to Google Translate Widget
    Adding Google Translate Widget and Hide Banner & Logo
  • Press the Add to your website now button and enter the Website URL that you will install
    Adding Google Translate Widget and Hide Banner & Logo
  • Select the appropriate settings pluggin you want, it is advisable to choose a display mode Vertical Inline
    Adding Google Translate Widget and Hide Banner & Logo
  • Copy the code which has been available into the HTML where the section of the widget you will install
    <div id='google_translate_menu' style='height:40px;display:block;margin-bottom:-40px;'>
      <div id='google_translate_element'/>
      <script type='text/javascript'>
      function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: &#39;en&#39;, multilanguagePage: true, gaTrack: true, gaId: &#39;UA-71524786-1&#39;}, &#39;google_translate_element&#39;);
      }
      </script>
      <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/>
    </div>
    
  • Next you save and see the results.

But appearance of your website is felt still less comfortable for the visitors, because google translate banner and logo displayed on your website.

Well, here is how to hide the banner and logo of Google Translate so that your website will look more professional. The simplest way is to add the code below on the CSS website.

<style type='text/css'>
iframe.goog-te-banner-frame{ display: none !important;}
</style>

<style type='text/css'>
body {position: static !important; top:0px !important;}
</style>

<style type='text/css'>
.goog-logo-link {display:none !important;} 
.goog-te-gadget{color: transparent !important;}
</style>

Share this

We are a blog that contains some hints about digital technology and we hope DigitalHints's blog useful for you all, and we hope to help to resolve your problems.

Related Posts

Previous
Next Post »