title: Adding Google Translate to a web site
body: <p>Looking here <a href="https://translate.google.com/manager/" rel="nofollow noreferrer">Google Translate</a> I get the following code.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;meta name=&quot;google-translate-customization&quot; content=&quot;9f841e7780177523-3214ceb76f765f38-gc38c6fe6f9d06436-c&quot;&gt;&lt;/meta&gt;
  
  &lt;div id=&quot;google_translate_element&quot;&gt;
  &lt;/div&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
    function googleTranslateElementInit() {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    }
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot; src=&quot;//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>But Looking here <a href="http://www.html-5-tutorial.com/" rel="nofollow noreferrer">html-5-tutorial</a>, at the top right, I see the following code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;translate&quot;&gt;
    &lt;div id=&quot;google_translate_element&quot;&gt;
      &lt;div dir=&quot;ltr&quot; class=&quot;skiptranslate goog-te-gadget&quot;&gt;
        &lt;div id=&quot;:0.targetLanguage&quot;&gt;
          &lt;select class=&quot;goog-te-combo&quot;&gt;
            &lt;option value=&quot;&quot;&gt;Select Language&lt;/option&gt;
            &lt;option value=&quot;af&quot;&gt;Afrikaans&lt;/option&gt;
            &lt;option value=&quot;sq&quot;&gt;Albanian&lt;/option&gt;
            &lt;option value=&quot;ar&quot;&gt;Arabic&lt;/option&gt;
            &lt;option value=&quot;hy&quot;&gt;Armenian&lt;/option&gt;
            &lt;option value=&quot;az&quot;&gt;Azerbaijani&lt;/option&gt;
            &lt;option value=&quot;eu&quot;&gt;Basque&lt;/option&gt;
            &lt;option value=&quot;be&quot;&gt;Belarusian&lt;/option&gt;
            &lt;option value=&quot;bn&quot;&gt;Bengali&lt;/option&gt;
            &lt;option value=&quot;bg&quot;&gt;Bulgarian&lt;/option&gt;
            &lt;option value=&quot;ca&quot;&gt;Catalan&lt;/option&gt;
            &lt;option value=&quot;zh-CN&quot;&gt;Chinese (Simplified)&lt;/option&gt;
            &lt;option value=&quot;zh-TW&quot;&gt;Chinese (Traditional)&lt;/option&gt;
            &lt;option value=&quot;hr&quot;&gt;Croatian&lt;/option&gt;
            &lt;option value=&quot;cs&quot;&gt;Czech&lt;/option&gt;
            &lt;option value=&quot;da&quot;&gt;Danish&lt;/option&gt;
            &lt;option value=&quot;nl&quot;&gt;Dutch&lt;/option&gt;
            &lt;option value=&quot;eo&quot;&gt;Esperanto&lt;/option&gt;
            &lt;option value=&quot;et&quot;&gt;Estonian&lt;/option&gt;
            &lt;option value=&quot;tl&quot;&gt;Filipino&lt;/option&gt;
            &lt;option value=&quot;fi&quot;&gt;Finnish&lt;/option&gt;
            &lt;option value=&quot;fr&quot;&gt;French&lt;/option&gt;
            &lt;option value=&quot;gl&quot;&gt;Galician&lt;/option&gt;
            &lt;option value=&quot;ka&quot;&gt;Georgian&lt;/option&gt;
            &lt;option value=&quot;de&quot;&gt;German&lt;/option&gt;
            &lt;option value=&quot;el&quot;&gt;Greek&lt;/option&gt;
            &lt;option value=&quot;gu&quot;&gt;Gujarati&lt;/option&gt;
            &lt;option value=&quot;ht&quot;&gt;Haitian Creole&lt;/option&gt;
            &lt;option value=&quot;iw&quot;&gt;Hebrew&lt;/option&gt;
            &lt;option value=&quot;hi&quot;&gt;Hindi&lt;/option&gt;
            &lt;option value=&quot;hu&quot;&gt;Hungarian&lt;/option&gt;
            &lt;option value=&quot;is&quot;&gt;Icelandic&lt;/option&gt;
            &lt;option value=&quot;id&quot;&gt;Indonesian&lt;/option&gt;
            &lt;option value=&quot;ga&quot;&gt;Irish&lt;/option&gt;
            &lt;option value=&quot;it&quot;&gt;Italian&lt;/option&gt;
            &lt;option value=&quot;ja&quot;&gt;Japanese&lt;/option&gt;
            &lt;option value=&quot;kn&quot;&gt;Kannada&lt;/option&gt;
            &lt;option value=&quot;ko&quot;&gt;Korean&lt;/option&gt;
            &lt;option value=&quot;la&quot;&gt;Latin&lt;/option&gt;
            &lt;option value=&quot;lv&quot;&gt;Latvian&lt;/option&gt;
            &lt;option value=&quot;lt&quot;&gt;Lithuanian&lt;/option&gt;
            &lt;option value=&quot;mk&quot;&gt;Macedonian&lt;/option&gt;
            &lt;option value=&quot;ms&quot;&gt;Malay&lt;/option&gt;
            &lt;option value=&quot;mt&quot;&gt;Maltese&lt;/option&gt;
            &lt;option value=&quot;no&quot;&gt;Norwegian&lt;/option&gt;
            &lt;option value=&quot;fa&quot;&gt;Persian&lt;/option&gt;
            &lt;option value=&quot;pl&quot;&gt;Polish&lt;/option&gt;
            &lt;option value=&quot;pt&quot;&gt;Portuguese&lt;/option&gt;
            &lt;option value=&quot;ro&quot;&gt;Romanian&lt;/option&gt;
            &lt;option value=&quot;ru&quot;&gt;Russian&lt;/option&gt;
            &lt;option value=&quot;sr&quot;&gt;Serbian&lt;/option&gt;
            &lt;option value=&quot;sk&quot;&gt;Slovak&lt;/option&gt;
            &lt;option value=&quot;sl&quot;&gt;Slovenian&lt;/option&gt;
            &lt;option value=&quot;es&quot;&gt;Spanish&lt;/option&gt;
            &lt;option value=&quot;sw&quot;&gt;Swahili&lt;/option&gt;
            &lt;option value=&quot;sv&quot;&gt;Swedish&lt;/option&gt;
            &lt;option value=&quot;ta&quot;&gt;Tamil&lt;/option&gt;
            &lt;option value=&quot;te&quot;&gt;Telugu&lt;/option&gt;
            &lt;option value=&quot;th&quot;&gt;Thai&lt;/option&gt;
            &lt;option value=&quot;tr&quot;&gt;Turkish&lt;/option&gt;
            &lt;option value=&quot;uk&quot;&gt;Ukrainian&lt;/option&gt;
            &lt;option value=&quot;ur&quot;&gt;Urdu&lt;/option&gt;
            &lt;option value=&quot;vi&quot;&gt;Vietnamese&lt;/option&gt;
            &lt;option value=&quot;cy&quot;&gt;Welsh&lt;/option&gt;
            &lt;option value=&quot;yi&quot;&gt;Yiddish&lt;/option&gt;
          &lt;/select&gt;
        &lt;/div&gt;
        Powered by 
        &lt;span style=&quot;white-space: nowrap;&quot;&gt;
          &lt;a class=&quot;goog-logo-link&quot; href=&quot;http://translate.google.com&quot; target=&quot;_blank&quot;&gt;
            &lt;img style=&quot;padding-right: 3px;&quot; src=&quot;http://www.google.com/images/logos/google_logo_41.png&quot; width=&quot;37&quot; height=&quot;13&quot;&gt;
            Translate
          &lt;/a&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script&gt;
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({
          pageLanguage: 'en'
        }, 'google_translate_element');
      }
    &lt;/script&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The former works on a live site only and not on a local computer and therfore I can not target and style it using CSS. Also it does not contain any SELECT and OPTION markup.</p>
  <p>The later contains the SELECT and OPTION markup but if I copy and paste the whole code, it does not work on a live site.</p>
  <p>I guess my question would be how to implement the google translate using the later markup?</p>