Author: Nosa Lee
Original Address: https://www.seeksunslowly.com/google-translate-deeply-customize-website
To reprint this article, please indicate the source, thank you.
_____________________________________

Making your website multilingual by Google Translate is very simple, I directly show you here, in order to prevent you from spending a lot of time or making detours in the first step:

<div id="google_translate_element"></div>
<script type="text/javascript">
   function googleTranslateElementInit() {
   new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

The effect as below:

If you want to integrated it on your site with uniform style by removing “Powered by Google Translate” or borders of list, changing text “Select Language” or its color, etc. How to do?

Let’s take a look at the effect by in-depth customization of Google Translate (almost seamless integration with the website, no sense of violation):

As above, the first 5 items are manually localized languages, the last one “Other Languages” is Google machine translation list.

I will directly list the complete code first, and then parse them for you line by line:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<div style="float:right" id="google_translate_element"></div>
<style type='text/css'>
iframe.goog-te-banner-frame{ display: none !important;}
body {position: static !important; top:0px !important;}
.goog-logo-link {display:none !important;} 
.goog-te-gadget{color: transparent !important;}
.goog-te-gadget-icon{background:none !important;}
.goog-te-gadget-simple{background-color:transparent !important;border-left: none !important;border-top: none !important;border-bottom: none !important;border-right: none !important;padding-top: 0px !important;padding-bottom: 0px !important;}
.goog-te-gadget-simple .goog-te-menu-value {color: #f35225 !important;}
.goog-te-gadget-simple .goog-te-menu-value span {color: #f35225 !important; border-left: 0px !important;}
.goog-te-gadget-simple .goog-te-menu-value img {display:none !important;}
</style>
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({pageLanguage: 'en', excludedLanguages: 'en,de,fr,zh-CN,zh-TW', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
  }
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script>
  $(document).ready(function(){
    $('#google_translate_element').bind('DOMNodeInserted', function(event) {
      $('.goog-te-menu-value span:first').html('Other Languages');
      $('.goog-te-menu-frame.skiptranslate').load(function(){
        setTimeout(function(){
          $('.goog-te-menu-frame.skiptranslate').contents().find('.goog-te-menu2-item-selected .text').html('Other Languages');
        }, 100);
      });
    });
  });
</script>

• # 1: including JQuery library, some JS code needs to call the library later.
• # 2: displaying the list box of Google Translate, please place the code on where you need to show Google Translate (usually the navigation bar or near). The float:right style will dock the translation control on the right.
• # 3~13 CSS: don’t show the translation toolbar at the top of the browser during translating, remove the words “Powered by Google Translate” and the Google Logo, make the list box transparent + remove the borders + remove the margins + change the text color + change the drop-down arrow color + remove the vertical line + hide the icon.
• # 14~18: set the basic style and languages of the translation control. The pageLanguage parameter indicates the language of the page itself, if it is a German site, should be changed to de, the code corresponding to each language can be found by visiting https://translate.google.com/?sl=auto&tl=de, choose a different language, and see tl parameter. the excludedLanguages parameter is the languages that needs to be excluded, for my website, en, de, fr, zh-CN and zh-TW have been manually translated, so Google translation is not required in order to avoid confusion for users, the corresponding parameter is includedLanguages, which means that only list the specified languages.
• # 19: fixed and necessary code, please don’t do any change on it.
• # 20~31: change the displaying text of Google Translate, the default one is “Select Language”, like my site, changing it to “Other Languages” is more proper (you need to change two places), further, if the visiting page is DE, then change it to “Andere Sprachen”.

Oter Important Supplements

• The above code can be used directly, and you may need to modify “Other Languages”, pageLanguage, excludedLanguages and the color of list box
• For # 3~13 CSS, if you still need further customization, please open your site (already has above code) in a browser, and then press <F12> to open the developer tool, pick the page element such as class, id or HTML tag, and the write the appropriate !important CSS for them.

【赞赏 / Reward】