Google Translate Widget with Flags For Blogger

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="http://1.bp.blogspot.com/-sXhoGx5s2dg/T5xOeRCOuYI/AAAAAAAAARo/ldYJIGQldwQ/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="http://2.bp.blogspot.com/-aklFaq6pPeQ/T5xOV1mPbcI/AAAAAAAAARg/CcBmt1ptN88/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="http://1.bp.blogspot.com/-nX0ktPsJQTA/T5xOMiiOGQI/AAAAAAAAARY/VXhAPARvh9E/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="http://4.bp.blogspot.com/-QPXkbtHOD4c/T5xODxO-FVI/AAAAAAAAARQ/1jye5k8T0DI/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="http://3.bp.blogspot.com/-0QwKU5U8K2k/T5xN5VZK2tI/AAAAAAAAARI/SvXac8-EQEg/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="http://4.bp.blogspot.com/-vJtqiSEPK0A/T5xNup0Q3vI/AAAAAAAAARA/SyuRn3jZjgk/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="http://2.bp.blogspot.com/-Em4KegbEBmk/T5xNjs5f_NI/AAAAAAAAAQ4/yLtUCDesqGs/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="http://2.bp.blogspot.com/-IVx5Fq_02dE/T5xNZIbiHzI/AAAAAAAAAQw/dvI6mI6z3Dw/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="http://2.bp.blogspot.com/-O932f9wBvk4/T5xNO_hx5uI/AAAAAAAAAQo/n8-iF7S_R8A/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="http://3.bp.blogspot.com/-es7IkxUUK_4/T5xNGn7TXYI/AAAAAAAAAQg/jAp6OM-Zj9Q/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="http://3.bp.blogspot.com/-cx9e66I48yM/T5xM9L7uzoI/AAAAAAAAAQY/ftpOVX9YZEE/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="http://1.bp.blogspot.com/-eXup49w042c/T5xMxliSlmI/AAAAAAAAAQQ/v9efq8I4TI0/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 / </a><a href="http://helplogger.blogspot.com"><font size="1px">Get this widget</font></a></p>
</div>
     </div>

Step 4. Now click on Save

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

    Random Posts

22 comments:

  1. 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.

    ReplyDelete
    Replies
    1. 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!

      Delete
  2. good code add thnk you newer look

    ReplyDelete
  3. thanks awesome ! but more languages

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

      Delete
  4. Anonymous10/01/2012

    Thanks

    ReplyDelete
  5. 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!

    ReplyDelete
  6. 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!

    ReplyDelete
  7. good code add thnk you newer look

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

    ReplyDelete
  9. Brillant! Thank you for code.

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

    ReplyDelete
  11. 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

    ReplyDelete
  12. thank you for code

    ReplyDelete
  13. Just saying...

    It's not Brazilian, it's Portuguese

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

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

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

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

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

    ReplyDelete