Tuesday, November 18, 2008

Widget Google Translator untuk Blogger

Posted by dav On 7:24 PM
Google tidak henti-hentinya melakukan perbaikan dan penambahan fasilitas, salah satunya Google Translator. Walaupun belum semua bahasa didukung dan masih ada beberapa bahasa dalam versi beta. Dengan adanya fasilitas Google Translator maka seluruh pengunjung dari berbagai belahan dunia (baca: yang didukung Google Translator) akan dengan mudah memahami detail artikel yang kita tulis. Beberapa waktu kebelakang Google Translator belum mendukung Bahasa Indonesia, tapi kini (walaupun terlambat) Google Translator telah mendukung Bahasa Indonesia, makanya bagi para pemilik blog/website memasang Google Translator adalah menjadi keharusan supaya pembaca setianya tidak berasal dari lokal saja (satu daerah atau satu keturunan atau satu bahasa).
Pada artikel ini kita akan mencoba membahas tiga jenis Google Translator, yaitu :

Google Translator Widget (W3C Recommended)
Google translator jenis ini menurut informasi telah diakui oleh W3C (World Wide Web Consortium), artinya sudah disahkan dan sudah tidak terdapat kesalahan dalam script Google Translator tersebut dan merupakan widget yang paling mudah dalam pemasangan pada blogger.
Langkah pemasangan Google Translator Widget (W3C Recommended) :
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<script src=http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&amp;up_source_language=en&amp;w=160&amp;h=60&amp;title=&amp;border=&amp;output=js></script>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :

Google Translator Widget Menu Dropdown
Widget yang satu ini sangat sederhana dalam tampilan tapi cukup lengkap dengan beberapa bahasa yang didukung, lebih dari 30 bahasa.
Langkah pemasangan Google Translator Widget Menu Dropdown :
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<form action='http://translate.google.com/translate_c?' target='_blank'>
<table id='gotrans'>
<tr><td> <select name='tl' style='width: 15em;'>
<option value='ar'>Arabic</option>
<option value='bg'>Bulgarian</option>
<option value='ca'>Catalan</option>
<option value='zh-cn'>Chinese undefinedSimplified)</option>
<option value='zh-tw'>Chinese undefinedTraditional)</option>
<option value='hr'>Croatian</option>
<option value='cs'>Czech</option>
<option value='da'>Danish</option>
<option value='nl'>Dutch</option>
<option selected='en'>English</option>
<option value='tl'>Filipino</option>
<option value='fi'>Finnish</option>
<option value='fr'>French</option>
<option value='de'>German</option>
<option value='el'>Greek</option>
<option value='iw'>Hebrew</option>
<option value='hi'>Hindi</option>
<option value='it'>Italian</option>
<option value='ja'>Japanese</option>
<option value='ko'>Korean</option>
<option value='lv'>Latvian</option>
<option value='lt'>Lithuanian</option>
<option value='no'>Norwegian</option>
<option value='pl'>Polish</option>
<option value='pt'>Portuguese</option>
<option value='ro'>Romanian</option>
<option value='ru'>Russian</option>
<option value='sr'>Serbian</option>
<option value='sk'>Slovak</option>
<option value='sl'>Slovenian</option>
<option value='es'>Spanish</option>
<option value='sv'>Swedish</option>
<option value='uk'>Ukrainian</option>
<option value='vi'>Vietnamese</option>
</select>
<script language="JavaScript">
<!--
document.write undefined'<input name=u value='+location.href+' type=hidden>')
// -->
</script>
<input name='sl' type='hidden' value='id'/>
<input name='hl' type='hidden' value='en'/>
<input name='ie' type='hidden' value='UTF-8'/>
<input style='width: auto;' type='submit' value='Translate'/>
</td></tr></table></form>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :

Google Translator Widget Mini Flags
Jenis ini paling banyak diminati, karena lebih bagus dalam hal tampilan. Terdapat bendera yang mewakili bahasa tertentu sehingga pengunjung tinggal memilih bendera untuk menentukan bahasa yang dikehendakinya.

Google Translator Widget Mini Flags Bujur Sangkar :
Langkah pemasangan Google Translator Widget Mini Flags Bujur Sangkar:
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<table width="99%" border="0" bgcolor="#00FFFF">
<tr>
<td width="99%">
<center>Translate this blog!<br/>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cen&amp;hl=en&amp;ie=UTF8'); return false;" title="English"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="English" src="http://dedehendriono.googlepages.com/UnitedKingdomGreatBritain.png" height="32" title="English"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Car&amp;hl=en&amp;ie=UTF8'); return false;" title="Arabic"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Arabic" src="http://dedehendriono.googlepages.com/SaudiArabia.png" height="32" title="Arabic"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cvi&amp;hl=en&amp;ie=UTF8'); return false;" title="Vietnamese"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Vietnamese" src="http://dedehendriono.googlepages.com/VietNam.png" height="32" title="Vietnamese"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Ces&amp;hl=en&amp;ie=UTF8'); return false;" title="Spanish "><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Spanish " src="http://dedehendriono.googlepages.com/Spain.png" height="32" title="Spanish "/></a>
<br/>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Czh-CN&amp;hl=en&amp;ie=UTF8'); return false;" title="Chinese undefinedSimplified)"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Chinese undefinedSimplified)" src="http://dedehendriono.googlepages.com/China.png" height="32" title="Chinese undefinedSimplified)"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cfr&amp;hl=en&amp;ie=UTF8'); return false;" title="French "><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="French " src="http://dedehendriono.googlepages.com/France.png" height="32" title="French "/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cde&amp;hl=en&amp;ie=UTF8'); return false;" title="German"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="German" src="http://dedehendriono.googlepages.com/Germany.png" height="32" title="German"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cit&amp;hl=en&amp;ie=UTF8'); return false;" title="Italian"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Italian" src="http://dedehendriono.googlepages.com/Italy.png" height="32" title="Italian"/></a>
<br/>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cja&amp;hl=en&amp;ie=UTF8'); return false;" title="Japanese BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Japanese BETA" src="http://dedehendriono.googlepages.com/Japan.png" height="32" title="Japanese BETA"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cko&amp;hl=en&amp;ie=UTF8'); return false;" title="Korean BETA"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Korean BETA" src="http://dedehendriono.googlepages.com/SouthKorea.png" height="32" title="Korean BETA"/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://www.google.com/translate?u='+encodeURIComponentundefinedlocation.href)+'&amp;langpair=id%7Cru&amp;hl=en&amp;ie=UTF8'); return false;" title="Russian BETA "><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Russian BETA " src="http://dedehendriono.googlepages.com/RussianFederation.png" height="32" title="Russian BETA "/></a>
<a target="_blank" rel="nofollow" onclick="window.openundefined'http://modification-blog.blogspot.com'); return false;" title="Grab this widget"><img border="0" style="cursor:pointer; cursor:hand;" width="32" alt="Grab this widget" src="http://dedehendriono.googlepages.com/hendriono.png" height="32" title="Grab this widget"/></a></center></td></tr>
</table>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :

Google Translator Widget Mini Flags Memanjang :
Langkah pemasangan Google Translator Widget Mini Flags Bujur Memanjang:
Langkah 1
Tambah Gadget - HTML JavaScript silahkan baca disini
Langkah 2
Masukan (copy paste) kode dibawah ini :
<form action="http://translate.google.com/translate_c?" target="_blank">
<script language="JavaScript">
<!--
document.write undefined"<input name=u value="+location.href+" type=hidden>")
// -->
</script>
<input name="hl" value="id" type="hidden">
<input name="ie" value="UTF8" type="hidden">
<input name="langpair" value="" type="hidden">
<input name="langpair" value="id|en" title="English" src= "http://dedehendriono.googlepages.com/UnitedKingdom24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|fr" title="French" src= "http://dedehendriono.googlepages.com/France24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|de" title="German" src= "http://dedehendriono.googlepages.com/Germany24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|it" title="Italian" src= "http://dedehendriono.googlepages.com/Italy24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|pt" title="Portuguese" src= "http://dedehendriono.googlepages.com/Portugal24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|es" title="Spanish" src= "http://dedehendriono.googlepages.com/Spain24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|ja" title="Japanese" src= "http://dedehendriono.googlepages.com/japan24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|ko" title="Korean" src= "http://dedehendriono.googlepages.com/SouthKorea24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair" value="id|zh-CN" title="Chinese Simplified" src= "http://dedehendriono.googlepages.com/China24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24">
<input name="langpair2" value="id|ar" title="Arabic" src= "http://dedehendriono.googlepages.com/SaudiArabia24.png" onclick="this.form.langpair.value=this.value" height="24" type="image" width="24" />
</form>
Atau klik tombol "Tambah Widget Google Translator" dibawah ini :
Happy Blogging :)

Popular Posts

  • Social Bookmarking - jQuery PrettySociable
    Social Bookmarking atau kurang lebih berarti penanda buku sosial adalah suatu cara/metode para pengguna internet untuk berbagi, mengorganisa...
  • Tampilkan Sembunyikan Isi dan Form Komentar
    Kembali lagi menulis setelah sekian lama bersemedi. Kali ini Blogger Tune-Up akan mengawali artikel terbaru di Blog ini dengan tips dan trik...
  • Perilaku Blogger Sukses
    Setelah membahas kebiasaan jelek blogger baru pada artikel sebelumnya, sangat tidak berimbang jika hanya membahas hal-hal jeleknya saja. Pa...
  • Image Maps (Map Area Coords)
    Bismillah. Alhamdulillah. Pernahkah kita berkunjung pada suatu situs yang didalamnya menggunakan peta? Kemudian ketika kita arahkan mouse da...
  • CSS Cara Membuat Efek Melengkung pada Image
    CSS Cara Membuat Efek Melengkung Pada Image - Melanjutkan Tutorial CSS sebelumnya, pagi ini kita akan mencoba membuat efek melengkung pada ...
  • Peralatan Desain Web Responsif
    Sekarang kita sudah memahami tentang Unsur Dasar Desain Web Responsif , dengan harapan memahami konsep dasar yang harus dilakukan ketika aka...
  • jQuery Image Preloader
    jQuery Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+ dan merupakan salah satu plugin yang banyak digunakan pada si...
  • jQuery Author Threaded Comments Highlight
    Setelah Blogger menambahkan fasilitas Threaded Comments, sangat sulit untuk membedakan antara komentar pengunjung dengan komentar author (p...
  • CSS Membuat Box Shadow
    CSS Membuat Box Shadow - CSS kita akan coba untuk membuat Shadow efek pada kotak/box. Tutorial ini hanya lanjutan dari tutorial CSS sebelumn...
  • Ads Popup - Iklan Yang Muncul Tiba-tiba (Update!)
    Sudah mencoba artikel " Membuat Wadah Iklan Tiba-tiba Muncul (Ads Popup Container) "? Nah, artikel ini merupakan update dari artik...

Blog Archive