Want to reach wider international audience? What better way to do it than by allowing your readers to read your articles in his or her own language!
Installing a translator on your webpage or blog will do just that. Google translator can translate your web page into 56 languages (as of 24 August 2009).
In this tutorial I will show you how to add a Google translator widget with the corresponding nation’s flag icons.
- Go to Dashboard > Design > Page Elements.
- Click Add A Gadget.
- In Add A Gadget window, select HTML/Javascript.
- Enter the title of your widget e.g. Translate This Page. This is optional.
- Copy the code below and paste it inside the window.
- Click Save.
3 | < a class = "translate-flag" |
4 | onclick = "href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=SourceLangCode|TargetLangCode&hl=InterfaceLangCode'" title = "Translate to TargetLangName" target = "_blank" >< img border = "0" style = "cursor: pointer;" src = "FlagIconURL" /></ a > |
Where:
SourceLangCode
is the code web page original language,TargetLangCode
is the code for language you want the page translated into, and InterfaceLangCode
is code for Google translator bar language.
TargetLangName
is the name of targeted language.
- Replace all those variables with their respective Google language codes and language name. Refer to the table below.
Language name | Code | Language name | Code | Language name | Code |
Albanian | sq | Hungarian | hu | Turkish | tr |
Arabic | ar | Indonesian | id | Ukrainian | uk |
Bulgarian | bg | Italian | it | Vietnamese | vi |
Catalan | ca | Japanese | ja | Afrikaans | af |
Chinese (Simplified) | zh-CN | Korean | ko | Belarusian | be |
Chinese (Traditional) | zh-TW | Latvian | lv | Icelandic | is |
Croatian | hr | Lithuanian | lt | Irish | ga |
Czech | cs | Maltese | mt | Macedonian | mk |
Danish | da | Norwegian | no | Malay | ms |
Dutch | nl | Persian | fa | Swahili | sw |
English | en | Polish | pl | Welsh | cy |
Estonian | et | Portuguese | pt | Yiddish | yi |
Filipino | tl | Romanian | ro | Afrikaans | af |
Finnish | fi | Russian | ru | Belarusian | be |
French | fr | Serbian | sr | Icelandic | is |
Galician | gl | Slovak | sk | Zulu | zu |
German | de | Slovenian | sl | | |
Greek | el | Spanish | es | | |
Hebrew | iw | Swedish | sv | | |
Hindi | hi | Thai | th | | |
FlagIconURL
is the link to the nation flag representing the target language. You can download free flag icons from Custom Icon Design,FamFamFam or MarkFennel.com. Then upload the ones you need to an image host such as Photobucket, Flickr or Picasa. Once uploaded, get the link to each image an use it to replace FlagIconURL
.
I’ve put a class name to the code, so you can easily style the flag if you want. Add the codes below before or after the translator code.
Here is a working sample of actual translator flags and their codes. The first one translates from English to Indonesian, with English interface. The second one translates from English to Spanish with Spanish interface.
3 | < a class = "translate-flag" onclick = "href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en|id&hl=en'" title = "Translate to Indonesian" target = "_blank" >< img border = "0" style = "cursor: pointer;" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz7vjHxlp_km3x3IuuUlVKlUlkWknAOmbUHrIVkdtEhIdFGaaIzuyNVKvnRLbYgJVQur7f2zovgnDRK5W5hwaWUODpzJf0Z2Q7e-kUPqNo9UQ-gjoPGMjJjH22xh1lNM2D_cXkxwEYAegx/" /></ a > |
4 | < a class = "translate-flag" onclick = "href='http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=en|es&hl=es'" title = "Translate to Spanish" target = "_blank" >< img border = "0" style = "cursor: pointer;" src = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYxuCcS3CyzAzMsomqplSlpfA7YzSI6a77iLleghhnPNhzMaEmQMCs5txsuH1O5tSNJ4LPP51nKz7W5FGYtIUPYwywIIFOB9iJMJtoQJNS4gMO_FVTLTcq6WArBH4T85laPpE2dE9aZbG8/" /></ a > |
Enjoy!
Before you leave:
- Do you find this article useful? Share it via Retweet, Share and Stumble buttons below.
- Any suggestion, question or comment? Please post it in the comments below.