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:

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. :)

Share |


1 Star2 Stars3 Stars4 Stars5 Stars (2 votes, average: 5.00 out of 5)
Loading ... Loading ...


SIMILAR POST :

SEARCH ENGINE KEYWORD RESULTS :
  • google translate
  • istanto
  • translate com
  • istanto blog
  • changing styling of google translation tool
  • istanto net
  • creating a blog
  • This bank account is disabled for entry into the PayPal website Please add a different bank account instead
  • online loans 2010 log in or register comments: blogs
  • translate google
  • google translation tools
  • start your own country vertaal online game
  • google translate styling
  • bestdomainexperts review
  • ISTANTO
  • Istanto
  • custom translate blog
  • page translation blog
  • how to add google translate tool on our page code
  • http://www istanto net blog
  • http://translate google free com/?hl=id#ms|en|
  • googletranslate tools
  • customize google translator
  • img rel cursor
  • google Arabic alignment
  • customize google tranalte
  • google translate custom
  • Desain samsung i9200 glxy s2 http://stenles com
  • porn webhostingworld
  • google translator in website style
  • july istanto
  • style google translate tool
  • google translate for standard 5th
  • hp data protector BSM EXE or REM EXE running in taskmanager
  • bestdomainexperts com review
  • www istanto net
  • translation arabic english tips
  • gogle custom search translate
  • google translating
  • repair2 inf istanto net
  • www visitorsIP viewer generatecode for site com/
  • id stanto
  • googletranslatetools
  • mobilepress lighttpd
  • google translate mini flags brazil
  • google translate tools
  • infinityads spyware
  • googletranslate tool
  • google custom translate
  • google translation tools customize
  • gadget google translator blog
  • translate brazil height to english
  • get squid conf permission denied
  • google cursor translation
  • customized google translation tool
  • Google translator ادات
  • google translate tool
  • 0h
  • translate google chrome from korea to english
  • freeeeeeeeeeeeeeeeee software pdf to word latest
  • google translator
  • how to customize google flag translation for website
  • customize google translate tool
  • amtalee til ipod
  • how to remove a hta spambot
  • google code translate customize
  • customize google translator on my website
  • google translet
  • access to the registry key Hkey_local_machine softwareprofitstudiosadsensefinderis denied
  • customize google translate
  • translate onclick google
  • gogle short cut for Motorola milestone
  • google blog
  • google translate href nofollow
  • Hh master porno mobil
  • translate tool google
  • sharecash options tips and trickes
  • google brazilian translation
  • yesup
  • porno movies translation arabc
  • google translate customize
  • custom translate a page google
  • gogle/transleate
  • styling google translate combo
  • low interest loans 2010 log in or register comments: blogs
  • custom google translate
  • google translate tool flag
  • google translate tool flags
  • GOGLE TRaslete
  • how to add google translater tool
  • google translator gadget with flags
  • personal loans 2010 log in or register comments: blogs
  • tool goolge translator
  • google translate tool customize
  • 3
  • google translate kills alignment css div
  • tool google translate
  • gogle translate
  • english movie online with arabic traselate
  • google translate gadget alignment right
  • googletranslate com
  • customization google translate tool
  • googleTranslate flag
  • gogle transelet
  • money loans 2010 log in or register comments: blogs
  • home loans 2010 log in or register comments: blogs
  • how to style google translate
  • i7500 için translatıon relaxation download
  • 2
  • how to use google translate combo
  • home loans blog: login or register
  • sony ericsson customize tools
  • google translation tool
  • make my customized google
  • GOGLE
  • google translate logged in
  • gogle
  • http://translate google com/translate_tools download
  • google translation tools flags
  • http://translate google com/translate_a/t?client=t& encoding
  • http://translate google com/translate_tools?hl=ent
  • google translation alignment
  • google translate customize size
  • customising google translate widget
  • use combo with google translator
  • customizing google translate tool
  • cant remove agprotect
  • translatetools
  • add google translator to your site with custom styling
  • How do I customize Google translate style in my website
  • translate google com/translate_a/t?client=t
  • 1
  • translate blog
  • download gogle market archos 5
  • custom google translate widget
  • on click translation online
  • 0about:blank
  • Make Custom Translation HTML
  • custom languages google translate
  • translate tool
  • google translate tool code
  • gogle translait
  • gogle transle
  • gogle/translate
  • http://translate google com/translate_a/t?client=t
  • customize google translate widget
  • gogle traslete
  • flag google translate sl tl hl u ie client
  • how to stylize Google Translate
  • google translate customizing design
  • wordpress blogs
  • Gogle Traslete
  • google translate tool vertical align
  • format google translate widget
  • translate gogle
  • customise google translate
  • google tranlator custom
  • google translate customizable
  • google translate hl sl tl
  • translate google custome
  • مخصص ترجمة
  • customize google translate blog
  • google translation customization
  • transle
  • gogle transleate
  • hover over a word with the cursor traslation by google
  • gơgle transelate
  • Translated page of http://www englishtips org
  • translet
  • home investment comment blog login register org
  • add translate to google custom search
  • google translate tool customize design
  • make google language tools source french
  • gogle translation
  • customisable translation
  • translate_a/t
  • google traslate com
  • googke translet

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!


This entry was posted on Friday, July 2nd, 2010 at 8:43 PM and is filed under Computer And Internet, Miscellaneous, Personal, Tips & Trick. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.