Google Translate Widget with Flags for Blogger ~ Online Hacker

Google Translate Widget with Country Flags for Blogger allows visitors to translate website or blog to their native language. Google Translate Widget auto detect website or blog language and translate website to visitors chosen language.

Google Translate Widget support different languages with flags which are English, Spanish, French, Dutch, German, Russian, Arabic, Italian, Portuguese, Japanese, Chinese and Korean.

Steps for Add Google Translate Widget to Blogger

Follow below simple steps to Add Google Translate Widget to Blogger:

Step 1

Step 2

When you click on Add A gadget Link a popup window will open and click on HTML/JavaScript as shown in below picture.

Step 3

Now copy below code and paste it to HTML/JavaScript box.

<script type="text/javascript">
function showHide(shID) {
    if (document.getElementById(shID)) {
        if (document.getElementById(shID+'-show').style.display != 'none') {
            document.getElementById(shID+'-show').style.display = 'none';
            document.getElementById(shID).style.display = 'block';
        }
        else {
            document.getElementById(shID+'-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';
        }
    }
}
</script>
<style>
  .google_translate img {
margin: 10px 20px 0px 20px;
    height: 24px;
    width: 24px;
        }
        .google_translate:hover img {
filter:alpha(opacity=0.30);
        -moz-opacity: 0.30;
        opacity: 0.30;
        border:0;
        }
.more {
    display: none;
a.showLink, a.hideLink {
    text-decoration: none;
    color: #0880C4;
    padding-left: 18px;
    background: transparent('down.gif') no-repeat left; }
a.hideLink {
    background: transparent url('up.gif') no-repeat left;
color: #0880C4;}
a.showLink:hover, a.hideLink:hover {
color: #0880C4;
}
  </style>
  <div>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZBaaHbQZ8-PoE_yup5s-nzVZjuXL-Pv1ki9AIlMJhxu2M6-rVxF5plzKv1c8AlY_K3VOxGHNt6y_z_7BWbYl6vWygF1P6VkK3HIwozmApJAXLznk2ODg9MwLx-0uxX9VP0YltJkHP00zC/s1600/United+Kingdom(Great+Britain).png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHBC4zatj1vJ7W2sZF1awO1mQ9T94JzL5qzvcKYL9yEFHlU0nCQZ3fN29vu9TyVajPkcLSw-v5CttQmDytqJmb0BdFXy0zT5Q3sO21SOttyNN2lAh7bzqNFK2a5a3BR_IvBIGea3c-3q_o/s1600/France.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNr9Oj_ABkn1wE7RM9j7DEQJ3RnuEv3acvEzeNp3nRtvRwolElBOREqbJI5ij3IyVdEx-f-HlkdRwoJ_DOgug5nMGt_ELxcTF1dJvdqqoytsIfBiqLH4QpSGOeG6-wwoXfMbe-V6c6eMZm/s1600/Germany.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7f2qzHHyr4LAtWjdrgP0_OsvjXbhtlD1m6KlsK9F70U-reLndTzQReSxf_nvSsHZSt3wRPyjfUDpKrDOry4ooch9LyU4AE0prIO9Cbhsqj37TWWOHWeW4_XngsaIbrMWW-XwSuho0Lhx6/s1600/Spain.png" style="cursor: pointer;margin-right:8px" width="24"/></a><a href="#" id="example-show" class="showLink"
onclick="showHide('example');return false;">More</a>
<div id="example" class="more">
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIF5Nr3gahhxec1ukd73uyi0cuKYZScbVAGlgBZak2kCeOfQyC9kF2eTlce3FLCG0nCBx4JRXLFQum45-pz5zJorLppTcI2ecsUkCRRCd1g6b8PqErx14GaRS4phPgRHbjDiNr71vaKGnl/s1600/Italy.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVkO6MuIRbPPOI5wrNRYvBOqHrxOPeNELWhtbQXBHi9HF3OpC5KX_aDfQeeS_hkIQWGILuNjSWpZNg-MycRIrX2wSsNM__M_BafB4NgSkdwoCGdlNqhnDozaWlYtiKT2Kv33ueJWhpunU8/s1600/Netherlands.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
      <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMSn-2vGkEvg_BO2BME2RiVjz0QniNZ7u2dpLyMs58FjK2dOQ86aEhP9-mHJtuuur1lUEBMnnvn1HRSZDVTK-Q7ufb1XQr3D7fKmj5Dsn0pFFpWVnsTluz_-C_w9M-AJ1jBYhL3wR2kEYj/s1600/Russian+Federation.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTUZyTkUc_rMDrSqyPWlQn1hhvK2VHekNuaVKiN96XKQVR-59sA7h_CYoWyD6M3QFXwEQzUQ3_CmJKcz_yzE4J0GStXfmfYITaEM99jYtAt8dHiVZNSvfC20QQrgHQ_DdCtmRNZOQ_xXcD/s1600/Brazil.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
<br />
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTL2OjAyX8ITiGSxDylVIHIXwjhQgybi2F1E3h-hi4gJtxHOuZ-NSQIIFh7hP1TkGObY5YqnbjKLOgh0ImkyXnaFHQh-h0Y7FmRxtgUKD3gYpCLT8GA3WaXwRK53oMC4pZqWQAcPBwkYj-/s1600/Japan.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqXUEbjwI07Pzmr_gz6_XD_TvzRHMYm97eXrXJaJbJtXG2aljf8xHzrQt1I3YGhzGYsmwx54TmPOlh-kyNfuN8i-Igm4FikXMp66yb8BFo6lMItWJcoKVqncHnvXJbhVrF25HpjTR8fKUo/s1600/South+Korea.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7Hb6TQezo8V5mOfDIxu9PkwKaSvuA7BDbR3SSSAaHhGNcrsq9lqo85HgzksfrNUo75OCGgF6YPlSsMl6qPmg8BO7W3xsHyj5hx5x8vRhsd9ZQ-wnUcZ8cXMtMrkJ4ML6kUT-YzFpQbYFl/s1600/Saudi+Arabia.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
  <a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=auto%7czh-cn&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="24" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhefOcvycTX5OcSQVZjyDG0rcK5tr0Ex_gM2L1pTpNmmq6t52NJr7CZwUV7EvyfSDNAHAhudbzQot9US9KpUhgIMnyFgH7Fv7LaeQsrcxxvlzk4C3m0lXP2JUQHdra6d3cb_WFU2ovj7u5i/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/><a href="http://www.haakblog.com" rel="dofollow" target="_blank" title="blogger"><img src="https://bitly.com/haakblog" alt="blogger" border="0" style="position: fixed; bottom: 10%; right: 0%;" /></a></a>
    <p><a href="#" id="example-hide" class="hideLink"
    onclick="showHide('example');return false;">Hide / </a><a href="http://www.haakblog.com"><font size="1px">Google Translate</font></a></p>
</div>
     </div>

Step 4

Now Click on save button.

You're done. Please refreshed your blog to see Google Translate button on your blog.

About Admin

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Online Hacker