This tutorial explains how you can add a script to allow readers to view your English site in other foreign languages. As you can see on the right of this page, a reader needs only to click the relevant country flag to read this site contents in his preferred language.

English is not the most popular language in the world. In fact, according to many reports, the Chinese language (Mandarin) is certainly the most widely spoken language. In the internet community, the other popular language platforms are arguably Spanish, Russian, Arabic, Portuguese, Malay, Italian, French, Japanese, and Korean.

Translation from English to other languages

If you have a blog written in English, it therefore makes much sense to be able to reach out to the non-English speaking population as well. There are several online translation tools, the popular free tools being AltaVista's Babel Fish translation and Google's Language Translator. WorldLingo is no longer a recommended tool, as the website translator has a translation limit of 500 words, beyond which you have to pay a monthly fee for their service.

For this site, I have used the Google Language Translator. Google is able to translate English website contents into Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish. The JavaScript used here can be applied to most of the blogging sites like Blogspot, Typepad and Wordpress. Copy the following script and paste it at the part of the template where you want your language translator to appear.

Code

<form action="http://www.google.com/translate"
>

<script language="javascript" type="text/javascript">

<!--

document.write ("<input name=u value="+location.href+"
type=hidden>")

// -->

</script>

<noscript><input name="u" value="http://cool-template.blogspot.com/"
type="hidden" /></noscript>

<input name="hl" value="en" type="hidden">

<input name="ie" value="UTF8" type="hidden">

<input name="langpair" value="" type="hidden">

<input name="langpair" value="en|ar"
title="Arabic" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/358406/gse_multipart12399.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|zh-CN"
title="&#20013;文（简体）/Chinese (Simplified)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/546049/gse_multipart12397.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|zh-TW"
title="&#20013;文（繁体）/Chinese (Traditional)" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/208681/gse_multipart12398.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|fr"
title="Fran&#231;ais/French" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/327620/gse_multipart12413.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|de"
title="Deutsch/German" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/734899/gse_multipart12400.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|it" title="Italiano/Italian"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/306145/gse_multipart12401.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|ja"
title="&#26085;本語/Japanese" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/443122/gse_multipart12402.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|ko"
title="&#54620;국어/Korean" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/581031/gse_multipart12403.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|pt" title="Portugu&#234;s/Portuguese"
src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/670301/gse_multipart12404.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|ru"
title="&#1056;усский/Russian" src="http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/111692/gse_multipart12405.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|es" title="Espa&#241;ol/Spanish"
src=
"http://photos1.blogger.com/x/blogger2/6075/564571464515337/1600/z/998398/gse_multipart12407.png"
height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

</form>

Points to note:-

1. For those using Blogspot, once you have logged into your Dashboard, go to Template-> Page Elements. Add a “Page Element” and select “HTML/JavaScript”.

2. Copy the above JavaScript. Under the “value” (in red), you will see the URL of this website. Please change that to the URL of your own website. Save and refresh the page.

3. If you want a slightly bigger flag, you can increase the width of the images, for example, from “30” to “36” and the height from “20” to “24”.

4. Should you come across a translation that doesn't look right, you can always suggest to Google a better translation to help them improve their translation quality.

Demo : http://cool-template.blogspot.com

Labels: Blog help

---