Google Translate Widget with Flags For Blogger

at April 29, 2012
The Google Translate Widget for Blogger allows the visitors to translate your site or blog in their own language.
This widget also auto-detect your blog language and then translate it to the readers chosen language.

It supports 12 different languages:
English, French, German, Spanish, Italian, Dutch, Portuguese, Russian, Japanese, Korean, Arabic And Chinese.
google translate for blogger, blogger gadgets, blogger tricks

How To Add The Google Translate Widget To Blogger

Step 1. Go to your Blogger Dashboard >> Layout and click on "Add A Gadget" link



Step 2. From the pop-up window, scroll down and choose HTML/JavaScript


 Step 3. Paste the code below in the empty 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/AVvXsEig2_J4HW1CWhRxEp6H_rSmIZd9R5zG2WlmyfSzFT6aGCmQCY_j3YQmPLlqBtb_f0F31BPGnIRfpqTfXh6FStP5OfE8AE8h8nmPaPteVFGasJnLyILtBLXFeg0hmY6Gwg4R00MaKLXlQdGH/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/AVvXsEh1CR0LziBz8JN79aL6XzOlc5phWJmRRBiVejzNis5Ap5GINnkrDpEKi1ISALWVO1DlDKCKLEpS1IFLNZ2WOmnAtouLqjKoNpA7voB9gwzOxTYdr8frw-s-VHZ4vvmDesjfVkOSzX1_YZs2/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/AVvXsEhbqsOexl97nrqJHL2QwtMKiS_eMQeUXpcaZRrQaGdK8mDo8i8MruXpujnIsOtP2BXW8Zh03CNTajwHOmeF9BPv0XW2krIxguIfFTJi6eYVfTdTTg_Sff118ZQkrRRL5EMTOk2CmoRCm_Za/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/AVvXsEgG1gXB36ph8TMu5469xOrxYRs-ASo2vrIGw3UqMhWXeaicXSW3d12ufuz-5bLCArz6cOlbu0JzSuBYCCdRdxkGyypgDBeYB9iPFBmbBMxP4fu2UVOBIMAPgyuOqDp6pKOkp-uhdT-huCXN/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/AVvXsEhOTqE92fWPR0qqFuR9YPXPMuD8pdWHjN0bjRjLrw9jaKpIOufaMK8SLsXbc3CG8jjKmWiLLiQfr1Imem77sl-ANYY3NaqFkn-2Qs4AIxt_z0Sxr-xjQ-T7hXwB4P2N0saO5Ki0hKQNE3ps/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/AVvXsEgZxT0W378wwYa7dBMmuV-0EN1Rbpm8RwKw1qB8jI1A_tA87TkBfPDJsS4rZ5wNeLOKXk9a3pkrgEb-8Dv5nfLwSyTL5_CRJ39o1Wq6cSYvAJAzcdpzWpLDLRYMXgRIsughXhUWUz6OZQza/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/AVvXsEgry6J5ZK9Dfycp5KQ9L7KRSygZeR-bYcAHKdz0o9GqmT1YsdVdJBNuP2-PISvf3On4SolDJLSRiq3dC9lF3ZofCMnHF78iMF_rLWVugOhwrKPSDdGHZzAciFujvacOAydG6cCJpNKMmgXL/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/AVvXsEg-XMaKi2q26kjgVdsnwN6Kv5UaATEwAOqAREsrbszPVnBUVj3WQz5SqUw-oiWtHpOZzH8BFdZMYrh3jMNV3mCGYp4BX13RymR9ygMbUdVvE1bYYXuHvxzPJokK3jLx_92j75g9w40vLNK7/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/AVvXsEggxHrxfzEsGIwoSAqLbVK5P6UssQg1dhHVNc6_awjwyKwBRmOoA9SSBdMm4S759faD_YwBSWxhUprESCgBgXd3cZaDFiBp1qA1uULIkFPgsWvgkpfCUpj5Uqv4necfbzmTPTY9n2uUmXbg/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/AVvXsEhWx9V4u8EPyxoZ53zuk4PvurQGZVOfZo83S9rOP1jMlpfVnv-S6Vp_SjFvABpGy1PixdyMDaMAv0mTWKiCmLn1UNoXhWeJr7p8ifFeRbNQChLrD6aF9zmFru23w_6mvb_g30mbHhOnUOHa/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/AVvXsEgb_m172mCsDoJYxQgISKV6qRB3hO7HA0y1mVWVjV3MxtjtNLTPlgdCaFA_b0sHnmAN4eGA8OsGPcwLw2Lw6JXUDmyVQ7glZ7E5dzmM61c_JahLg3sTSn1V6afNrH8OZSgF7FuBdurq3Xda/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/AVvXsEgf0OwJQhlJT1sy4PLEsUrmRIgtPk2zYVyaiDfXwPm_a68d7us6cdMyzsEB82rHTVH2EgSr4E3R7rCEvGqpv9dGiTacGnyOAD9jQusEax9RaofTit6mCtpTHStZwuLExXfBln3LuQ35J8UV/s1600/China.png" style="cursor: pointer;margin-right:8px" width="24"/></a>
    <p><a href="#" id="example-hide" class="hideLink"
    onclick="showHide('example');return false;">Hide</p>
</div>
     </div>

Step 4. Now click on Save

google translate, blogger widgets, gadgets for blogspot
And you're done! Enjoy (:
Tags:

Comments/disqusion
24 comments

  1. says:

    Hmmm ... I had been wondering about how to add a translation widget again after losing it when I changed my blog design to dynamic views. Dynamic views seems to get rid of everything in the right sidebar.

    I've got around this by adding new pages to my blog and putting the links, badges etc on there. I now have a "translate" page, on which I've put this widget, but have just tested it and it doesn't actually seem to translate my English blog into any of the foreign languages it is supposed to. I'll try again later and if it still isn't working, I will have to get rid of it and try a widget from somewhere else. I wonder if having the widget on a separate page is causing the problem.

  2. says:

    Hi Julie,

    You're right, it seems that Blogger has recently added a translation widget, so this widget is no longer useful. To add Blogger's translation widget go to Design > Page Elements > Add a Gadget > and choose "Translate" widget from the pop-up window. Thanks for visiting!

  3. says:

    good code add thnk you newer look

  4. says:

    thanks awesome ! but more languages

  5. says:

    Ok, i will add some more soon. Keep visiting ;)

  6. says:

    Thanks

  7. says:

    Very nice widget! Thank you for creating this one. I have made some changes to this code and added 4 more languages which are : Urdu, Bengali, Hindi, Persian here: http://www.93blogger.com/2012/10/google-translate-widget-country-flags-blogger-blogs.html
    Hope it helps others! Thank you for this!

  8. says:

    Thank you sooo much!!! I just did it on my blog!!! :)
    I cann't describe to you how happy I am...I'm so lost when it comes to changing HTML codes and all that stuff, but this was so easy! Thank you :)))
    P.S. YOU HAVE AWESOME blog and it is SOOO helpful!

  9. says:

    thanks for sharing..

  10. says:

    good code add thnk you newer look

  11. says:

    thanks friend nice widget is very important in my blog
    http://arabemangatube.blogspot.com/

  12. says:

    Brillant! Thank you for code.

  13. says:

    nice

  14. says:

    Not working on my site: http://www.hdpeak.net
    I need help. Thanks

  15. says:

    Hey Thank you..you r great !!!That in-built gadget is not translate my post contents.
    I was searching for this option for long time.Finally, this is what am looking for..GREAT..Thanks

  16. says:

    thank you for code

  17. says:

    Just saying...

    It's not Brazilian, it's Portuguese

  18. says:

    Thank you ever so much for this code! Helps me enormously!!!

  19. says:

    This is awesome widget I totally agree with this post this code help us lot Thanks

  20. says:

    I need a translator that translate Nepali to English. Is there is any please help me. I couldn't find it anywhere else.

  21. says:

    thank you very much.
    http://bocahdamar.blogspot.com/

  22. says:

    Thank you! Actually you can directly add the gadget from a list they offer. No need to embed the code!

  23. says:

    We was finding this widget. Thank you for sharing...

  24. says:

    fail code