Google Translate Widget with Flags for Blogger

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/AVvXsEjkbn81dDr892sKRY4sSRODvpPrvzzHHCughRbminltdsKKLrYJt-h_zg9u2_Lf2ZNjA5ZNN83xDdCmGgzEHgpbs8K99iGolgt0X_zztbUHkHytruO5SEQsbO_O9-278k2ldEB31qOcZvdn/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/AVvXsEg7ygr-sdUW2qvbiEJgSUG62HqgjPaHZVLXjINHvhaXpi-43KYMCrV_JRq5869vfgkcSXQsgK39IRkFJQrermFMhyAtAIuk7qv0BWCqMqcMyIt9OmbJsSZd2ieiGH1HV6sP7j4_vCLpsh1j/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/AVvXsEiK-ErVDGRh3ELNg0DFmbFi67gltYfjB_MabwYhq8fkU51YePwJQXd39dc5VF2JbcxtqQltjDQrWcbSCweFeg3_leVTl_hGxc8aAl8qDyu9Lh7RbvD7b9ZIia2dDqUxeYbaaI-09gCxbgci/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/AVvXsEjlyoYY-0kAt_nxlO2C1paUuczrK2ua1zC-PB33moQ2ANda4gTgk83ALpQ_H0TRy3xffJ4PMwPnIMRJHfGrd__166w1EO-WdOQHzTZBn-oX_pBbAPhnJyU2lqQ7QCKw1gA1xiiDDaa_Wylz/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/AVvXsEhtIoi1gdu6oZ41HyM5AfTARhu590clIIKl5aC2YOAsyNqcP7F7jZdudaVeOnQsyMnDhE0MszDNJw2nNKDWNczPRqaf9IRN88uZEGGqZNQB9Hx7yhRSdLxH_A_KbHa1iKmyiJq6XaSTdnMg/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/AVvXsEgiP-dWM8CReXdWIQw4sVRxxsupzd4jo8YV9yfKKd9_4aNgyxwK6gRPLqPS0sbmLKViE3JKMCtQpmNumiV_bJhGbq7NHoAGUy3UXM0qAlapsnVI72f2geRFwV5JI9v6Z5vcaNvqNHNLovLY/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/AVvXsEgC_cXpjhxnwrz4vrOiNS9kGzkoEei1pAXb7Pe7tM3_SvJwIfWWRJnM8ISvGX32shwkEsZygRqu8A5DCw3Hu5DPxqG9gkvdAlwqQ9U3ghapjHF3vHqim8MZD8TTs_tjTDykl-f61MY1pIMg/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/AVvXsEge39VX0zcriYnkHVwqv7riRlQ1yWrEJMYAnrBhw_rG7hCOAYmxv8oNHHXT8VEpxEGxdUJhgbMcHXLeB0-jeJ62nSWHoGqzwZEUP2mFgU5M7TbVOe5KXnvkCx4CfttyDJNRb2PGWvrdrpYr/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/AVvXsEjgASzEuz5OY2qRTqJZjMF_QGHQcL5C6jatpbd8dhDll8q-ZQWocn1du18ZIGQ7-cfxqv3lvc457EJNd0vq6187cI8-SiBqrW_AMCvOsyxQhgiwsjUIgx1JBccRg0f6nUonlcQq1nXzZUh9/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/AVvXsEjtRzHl6RUnulAQtB6jqIoDHYmSfkOJmYeguzZYLOCAz5O2r_9_4pMH9uw7aiyg0fYiyU8M0cpMF04e6t38Jx-09AQSpxO8oV9uzFUJW0J06sKkHEoHjer0LAhpBOtVswICYi322fJJXK97/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/AVvXsEg6NOKAjb4TrkdAFeaFYkUwmEWWViYEPqZ1lonbn9j01SOUuGeazDJ9x9dAVKL31tJToXfz3mA2ZXbtq3ZaLn4hvVycETQ79j1xgmhyFvy28SMohzZXLw_9z5oUVZFVkgPHKGy9b-EBsCng/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/AVvXsEgaqn9p0szJMOJBqwf2sbKyAEGYBETueyeCcEVxc3uyfBCicuNRCus6HQJ2aqjYY163MtlyDNvasxT-qDVO9NAkZXKuIPifbbKeLRQEQqaPJDNrn8HCzlsXVrWRKEOOL3p9VFjffUzA670Q/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/>
    <p><a href="#" id="example-hide" class="hideLink"
    onclick="showHide('example');return false;"> </a><a href="http://www.bfaqeera.tk"><font size="1px">Blogger Tips&Tricks</font></a></p>
</a></div>
     </div>

Step 4

Now Click on save button.

You're done. Please refreshed your blog to see Google Translate button on your blog.
Thanks Regards Bfaqeera.tk

Thursday, 16 October 2014