Adding Language Translation Widget to your Blogger

When your blog or web site become more popular , your visitors may be come from different countries, there are from English speaking and Non-English speaking countries. When a Non-English speaking visitor comes to your English blog, he or she might skip over even though your content is good. So, it's very useful that you provide language translator on your blog.

Here's a quick tutorial to add language translation widget to your blog. You can be any blogging platform including Blogger, Wordpress or Typepad that provides access to templates.

STEP 1
Goto Template -> Page Elements, Add a Page Element by Clicking on "Add a Page Element" link.

STEP 2
Add a HTML/JavaScript Element to your blog.

STEP 3
Copy the following code and paste it into textbox.

<form action="http://www.google.com/translate" >
<script language="JavaScript">
<!--
document.write ("<input name=u value="+location.href+" type=hidden>")
// -->
</script>
<input name="hl" value="en" type="hidden">
<input name="ie" value="UTF8" type="hidden">
<input name="langpair" value="" type="hidden">
<input name="langpair" value="enfr" title="French" src= "http://photos1.blogger.com/img/43/1633/320/13539949_e76af75976.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="ende" title="German" src= "http://photos1.blogger.com/img/43/1633/320/13539933_041ca1eda2.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="enit" title="Italian" src= "http://photos1.blogger.com/img/43/1633/320/13539953_0384ccecf9.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="enpt" title="Portuguese" src= "http://photos1.blogger.com/img/43/1633/320/13539966_0d09b410b5.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="enes" title="Spanish" src= "http://photos1.blogger.com/img/43/1633/320/13539946_2fabed0dbf.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="enja" title="Japanese" src= "http://photos1.blogger.com/img/43/1633/320/13539955_925e6683c8.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="enko" title="Korean" src= "http://photos1.blogger.com/img/43/1633/320/13539958_3c3b482c95.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair" value="enzh-CN" title="Chinese Simplified" src= "http://photos1.blogger.com/img/43/1633/320/14324441_5ca5ce3423.jpg" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30">
<input name="langpair2" value="enar" title="Arabic" src= "http://photos1.blogger.com/blogger/3709/485/1600/arabic-flag.gif" onclick="this.form.langpair.value=this.value" height="20" type="image" width="30" />
</form>
STEP 4
Save the Change and done.