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
  
• Press the Add to your website now button and enter the Website URL that you will install
  
• Select the appropriate settings pluggin you want, it is advisable to choose a display mode Vertical Inline
  
• 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>