In this short article we will learn how to created an custom google translate tools. Google translate tools is free translate service provided by google. This tools really help people to translate some website/page to any language people want.

Google translate tools standards is not really interesting in style *lol* So why we don’t created a simple good looking translate tools our own, but of course we have to credited google as this service provider? Alright let’s created it, I want everyone be creative as possible.

First we have to know how translate tools format working. Example:

http://translate.google.com/translate?hl=en&sl=en&tl=pl&u=http%3A%2F%2Fwww.istanto.net

This is standard format when google translate try to translating my blog from English to Polish. There is some rules we can manipulate it. Example, I try change tl=pl with tl=id:

http://translate.google.com/translate?hl=en&sl=en&tl=id&u=http%3A%2F%2Fwww.istanto.net

The result is I got id translation page (Indonesian). When I try change sl=en to sl=id I got result:

http://translate.google.com/translate?hl=en&sl=id&tl=id&u=http%3A%2F%2Fwww.istanto.net

So the answer is we can manipulate this format if we know country code! That it! Standard format would be like this:

[to_plus]

http://translate.google.com/translate?hl=en&sl=[YOUR PAGE ORIGINAL LANGUAGE]&tl=[LANGUAGE YOU WANT TRANSLATED TO]&u=[PAGE SOURCE]

HL = Hidden Language? *lol* I Don’t know! This properties maybe the language setting on each computers or from where google page country we coming from.

SL = Source Language

TL = Translated Language

U = User

Okay we already know and understand this format, our next goal is created a custom html code to follow this format. This is a simple code I created, if you can please use CSS to make this code clean.

<style>
.translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
padding-left:0px;
}

.translate:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;
border:0;
}

</style>
<div style=”text-align:center”>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”English” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cen&hl=en’); return false;”><img alt=”English” border=”0″ align=”absbottom” title=”English” height=”24″ src=”http://www.istanto.net/flag/uk-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”French” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cfr&hl=en’); return false;”><img alt=”French” border=”0″ align=”absbottom” title=”French” height=”24″ src=”http://www.istanto.net/flag/france-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”German” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cde&hl=en’); return false;”><img alt=”German” border=”0″ align=”absbottom” title=”German” height=”24″ src=”http://www.istanto.net/flag/german-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Spain” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Ces&hl=en’); return false;”><img alt=”Spain” border=”0″ align=”absbottom” title=”Spain” height=”24″ src=”http://www.istanto.net/flag/spain-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Italian” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cit&hl=en’); return false;”><img alt=”Italian” border=”0″ align=”absbottom” title=”Italian” height=”24″ src=”http://www.istanto.net/flag/italy-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Dutch” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cnl&hl=en’); return false;”><img alt=”Dutch” border=”0″ align=”absbottom” title=”Dutch” height=”24″ src=”http://www.istanto.net/flag/dutch-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<br/><br/>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Russian” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cru&hl=en’); return false;”><img alt=”Russian” border=”0″ align=”absbottom” title=”Russian” height=”24″ src=”http://www.istanto.net/flag/russian-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Brazil” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cpt&hl=en’); return false;”><img alt=”Brazil” border=”0″ align=”absbottom” title=”Brazilian” height=”24″ src=”http://www.istanto.net/flag/brazil-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Japanese” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cja&hl=en’); return false;”><img alt=”Japanese” border=”0″ align=”absbottom” title=”Japanese” height=”24″ src=”http://www.istanto.net/flag/japan-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Korean” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Cko&hl=en’); return false;”><img alt=”Korean” border=”0″ align=”absbottom” title=”Korean” height=”24″ src=”http://www.istanto.net/flag/korean-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Arabic” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Car&hl=en’); return false;”><img alt=”Arabic” border=”0″ align=”absbottom” title=”Arabic” height=”24″ src=”http://www.istanto.net/flag/arab-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<a class=”translate” href=”#” target=”_blank” rel=”nofollow” title=”Chinese Simplified” onclick=”window.open(‘http://translate.google.com/translate?u=’+encodeURIComponent(location.href)+’&langpair=en%7Czh-CN&hl=en’); return false;”><img alt=”Chinese Simplified” border=”0″ align=”absbottom” title=”Chinese Simplified” height=”24″ src=”http://www.istanto.net/flag/china-flag.png” style=”cursor: pointer;margin-right:8px” width=”24″/></a>

<div style=”font-size:10px; padding:8px 0px 0px 0px”><a href=”http://www.istanto.net/how-to-creating-custom-google-translate-tools.html” target=”_blank”>Custom Google Translate Tools</a> – <a href=”http://www.google.com” target=”_blank”>Provided by google</a>

</div></div>

The result will be like this:

That’s looks beauty right? 🙂 You can add more translated language if you want. All you need to do is preparing the country flag pictures and edited the code. I wan’t someone created wordpress plugins for this custom translate, you’re free to use code in here.

That’s the lesson for today, have a nice day. 🙂

[/to_plus]

 

Similar Posts:

Related Search Terms:

    Digg Del.icio.us StumbleUpon Reddit Twitter RSS

If you're new here, you may want to subscribe to my RSS feed. You may copy or publish this article to your blog or other site as long you give credit link back to this site article. Thanks for visiting my blog!