Knowledge is good only if it is shared. As a new blogger, I had learned to change the Web template, and found out the tips, tricks, hacks, and tweaks of altering the Blogger template, customizing CSS, widgets, layout, blog design, inserting JavaScripts, HTML codes, Google AdSense, and other settings the hard way, through many trials and errors. For the purposes of this guide, I had started with the old Blogger “Minima” template. As I made the changes or learned something new, I had documented them. Before changing any template, please remember to save a copy of the current template. After editing the template, preview it, and save it when you are satisfied with the change. Hope this guide will help those who are finding the way around, just like me.

Search Tips for New Bloggers

We have extended our month-long vacation by a couple of days. We shall be posting articles the moment we return. We noticed that Google had updated the Page Ranks. New bloggers who have been waiting anxiously for this can check their blogs' Page Ranks. We have the PR checker link in our SEO Tools - Search Engine Optimization article.

The blog we created recently in Aug 2007, Blogger FAQ and Help, has also got its first Page Rank, a PR4. All our blogs are now ranked:-

Tips for New Bloggers - PR6
Business Fables and Management Lessons - PR4
Famous Motivational and Inspirational Quotes - PR4
Blogger FAQ and Help - PR4

Thanks to everyone for the support!

Mar 16, 2007

Digg This Story

Language Translation Flags and Script

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.

<form action="" >

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


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

// -->


<noscript><input name="u" value="" 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="" 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="" 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="" 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="" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|de" title="Deutsch/German" src="" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|it" title="Italiano/Italian" src="" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|ja" title="&#26085;本語/Japanese" src="" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|ko" title="&#54620;국어/Korean" src="" 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="" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">

<input name="langpair" value="en|ru" title="&#1056;усский/Russian" src="" 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= "" height="20" type="image" width="30" onclick="this.form.langpair.value=this.value">


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.

Translation from other languages to English

If you have a site written in another language, you can also have a translation tool on your Blog to translate it into English. At the moment, Google is able to translate Arabic, Chinese, French, German, Italian, Japanese, Korean, Portuguese, Russian, and Spanish sites into English.

Go to the official Google Language Tools site. Key in your Blog URL at the place circled in the picture below. Choose the languages e.g., “Italian to English”.

Language Translation Flags and Script

Once you click “Translate”, you will be taken to the translated page. Copy the translated page URL in the browser. We have to insert this URL into the HTML code.

Language Translation Flags and Script

Next, login to your Dashboard, under Template -> Page Elements -> Add a Page Element, choose HTML/JavaScript at the place where you want to put your translation flag.

If you want a United Kingdom flag, copy and paste this code into the page element.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src=""/></a>

If you want a United States of America flag, use this code instead.

<a href="translated page URL" title="English"><img border="0" alt="Google Translation" src=""/></a>

Please remember to insert the translated page URL into the code. If you wish to resize the picture by specifying the width and height, or if you want to have readers go to a new window when they click the link, you may read the article on Hyperlinks and Image Links (II) to see how you can do that.

Save and refresh your Blog to see the translation flag.

© Tips for New Bloggers

Found this article useful? Mention us in your post, subscribe to our feed, link to us, or bookmark this site. Thanks for your support!AddThis Social Bookmark Button


QuantumFog said...

A much needed site. Good design.

Deanna Moore said...

Thanks for your return comment on my site. You mentioned that you can contect to videos. Can you host videos on a Blogger account or do you have to use a site like YouTube?

Your Language Translate post was very well timed. I just had someone from Portugal take a look at my site. Hopefully now I've added the Translate feature they can read it easier! :)

(Deanna's father)

bizwhiz said...

Hi James

Since you've mentioned, I have posted a new article on how you can add videos to your Blog post or template. While there are several ways to do it, I think using these free video hosting services are the simplest. Cheers!

BlogmasterPg said...

k very well, I have 5 blogs with, but i leave in Italy and seak only italian language. Now, i know goggle traslator in italiano to another language is only in english and french. You now if your codex is good for me? Please, can you send me a response in one of my blog? Yesterday i open an google group on 'hellp blogger in italiano', but it no put in anyone.. In Italy there are lot strange people!!! Thacj you and very compliments for your good site!!! BlogmasterPg; you can find me in bye bye.

bizwhiz said...

Hi blogmasterpg

I have sent you an email with the HTML code for conversion of your Italiano site to English. Hope it helps.

Paul said...

Hi, thanks for the language tool code, just put it on my site. Also, I've done a little write up, praising your tips and advice.

All the best.

Candace Dempsey said...

Hi Sherry,
Another great tip! And you explain things so well. Grazie.

reog said...

I use google translator, in my FOODIEBLOG , under every post. But I still confuse, where is the right place to, add it, at header?at footer?at sidebar? or under every post like I did?Can you help me?

bizwhiz said...

Hi reog

You can put it anywhere so long as you think it fits into your blog layout and design. As it is, I thought it looks rather neat and nice below your post.

Since every individual's taste and liking is different, you may want to ask your friends' and readers' opinions too.

Canados said...

great blog. bizwhiz can you please send me the code for my italian blog?
I need firstly italian-english. After I'll add from englih to other languages. Thanks

bizwhiz said...

Hi Canados

You already have the Italian to English language translation flag in your site.

You can put the code we mentioned in this article and see if the page can be further translated from English to other languages.

Lara said...

where can i get the code for an american flag to translate a page into english?

bizwhiz said...

Hi Lara

I have updated the article to include a "how-to" guide for translation of sites into the English language. Thanks.

Mei said...

Where/how can i find the code for English to Malay (Bahasa Malaysia) translation code.

bizwhiz said...

Hi Mei

At the moment, Google does not have English-Malay web translations. Perhaps you may try searching the net for other translation services?

Aicha Qandisha said...

Thank you so much for this code! Do you know if there's any way to add an English to Turkish element? Thanks, again. You do an excellent job at this site.

bizwhiz said...

Hi Aicha Qandisha

Google does not have English-Turkish web translations, so we will not be able to add that into the code.

Sumayah said...

ok it seems i'm a bit slow. I wanted to include this code for my wordpress blog and changed the red text to my wordpress blog's url, and I didn't get anything on my blog page LOL. I think i'm doing something wrong here. Any ideas on why its not working for my wordpress. I was trying to use the widgets section of wordpress to add it to the side bar with no success. Maybe you can help me out here LOL.

bizwhiz said...

Hi Sumayah

We have used all the tips here for Blogger/Blogspot blogs. We do not have a blog in Wordpress.

As far as we know, there are a number of translator plugins available on the web that you can use for Wordpress blogs. You may want to try that.

opensemi said...

Thanks a lot! Excellent

Telling It Like It Is said...

I've been carefully reviewing your helpful tips and following the easy instructions. I now have translation flags on my page, but I'm wondering how to put the box above the flags (like on your page) that says Translation by Google???? Please help. Your site is awesome, it's really helping me!

bizwhiz said...

Hi Telling It Like It Is

That is just the sidebar title. I merely added a background color here:-

h2 {

Precious said...

Thank you so much! your site is great, very organize and well explained. I am one of your avid readers. More power!

J W said...

Great! Thanks for the tips! I have insert this code into my A-Man-Fashion Blog

Look forward to your newest tips!!


blogdeny said...

Thanks... i used it on my blog now.

Anonymous said...

Hi, May I have a small USAflag, the size like your blog have other flags. Thanks

Xin Ren said...


Your blog is truly a "beacon" to a newbie like me in blogsphere.

I have implemented the Google translator but it is not working well with IE. Translation is not a problem with Firefox or Safari.

When I tried the Google translator on your blog in IE, Firefox and Safari it works well.

So, I am not sure where breaks.

Thanks for the sharing of your knowledge.

Juan Pobre said...

Google Translate does not work if I have my blog (Blogspot) permissions set such that only invited readers can read the blog. (I did this because the blog is about my wife's health.)

I temporarily reset the permissions so that anyone can read the blog and then Goggle Translate works fine.

Any ideas on this? Any workwarounds you are aware of?

Thanks in advance.

Joshua Coogler said...

I have problem using Google translation code listed here. It works fine in firefox but in ie i lose the right sidebar completely. Any thoughts?

Daniel Stark said...

I'm having a problem where a blank white box appears at the top of the screen (only a section of the page) after the translation is complete. Is there a way to prevent this?


BrAnD_NeW said...

Wow dude thanks for the translator!! ive looking for this for long time thanks!! if u can plz visit my blog

Paint Me Gorgeous said...

thank u for the tip!!!!

soerdjak said...

what a great post, it realy help me to modified my blog with a google translate, so people around the world can do translate my blog with easy.
thanks for the info.
it's great.

The Tibetan Plateau Blog said...

Hello, your site is GREAT! Thank you for maintaining this helpful site. I took several tips from you and there is more to go. I just uploaded the language translation tool and I would love to have Tibetan translations. Is that possible?

Again, thanks so much!