Gadgets, Tech tips, WordPress and Blogger Tutorials

Google Translate Mini-Flags Widget

traslation-flags-widget

Add a Google Translate Mini Flags widget to your blog. Powered by Google Translate, this widget lets your visitors view your pages translated in their own native languages with just a click.

Single Column

Code:

Single Row

Code:

Double Row

Code:

This widget is tested on Blogger, WordPress and Joomla. It might also work on other platforms.

How to add the Google Translate Mini-Flags Widget to your blog:

Blogger

1. Go to your Dashboard > Layout > Add a Page Element > HTML/JavaScript
2. Paste the code
3. Add a title. Ex: Translate, Translate this page, Google Translate (Optional)
4. Save (or Save Changes).

WordPress

1. Login to your Admin panel > Presentation tab > Widgets tab
2. Paste the code into the Text Widget. If there’s no Text Widget available, add one.
3. Add a title. Ex: Translate, Translate this page, Google Translate (Optional)
4. Save.

Joomla site

1. Login to your Admin panel > ModulesSite Modules > click New
2. Paste the code into the Custom Output content box
3. Adjust module details and menu item links if necessary
4. Click Apply or Save.

Google Translate is still on its beta phase. Much like with other web page translation services, your readers might find parts of the translation very funny. Google has yet to meet their standards on this.

This widget is distributed freely. Feel free to use it, change it to meet your needs. Just drop a comment below to let me know it helped out, or if you have questions or problems adding it your blog or site.

Get updates delivered straight to your inbox!

Enter your email address:

177 comments

  1. For Tommy: English to Haitian Creole ALPHA

    <div style="border:0px solid #ccc;padding:10px 0px 3px 0px;text-align:center;background-color:none;min-width:235px; margin: 5px 0 5px 0;">
    <div align="center" style="width:auto;">
    <a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cht&hl=en&ie=UTF8'); return false;" title="Haitian Creole ALPHA"><img border="0" style="cursor:pointer; cursor:hand;" width="53" alt="Haitian Creole ALPHA" src="http://3.bp.blogspot.com/-dUUblY6jzG4/TlVWY-wI6QI/AAAAAAAACo0/Tmn3Ul2pNfY/s400/haiti.png" height="32" title="Haitian Creole ALPHA"/></a>
    </div>
    <small><a target="_blank" rel="nofollow" onclick="window.open('http://www.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en%7Cht&hl=en&ie=UTF8'); return false;" title="Haitian Creole ALPHA">Translate this page into Haitian Creole</a> </small><br/>
    </div>
    
  2. great widget…i need also to allow arabic translation, tried to edit one of the language sections in the code, but didnt want to fiddle too much…any tricks you can share oooh master?

  3. santosh kumar /

    thanks . it’s very easy step to add google translator.. thanks a lot

  4. anmol gupta /

    plz. add arabic and hindi also in this code.

  5. Please supprot me Code to Translate English to Vietnamese.
    Thank you very much!

Leave a Reply