Widget Translator Halaman · Versi 2

Tabel Konten
  1. Kode Widget 
Widget Translator Halaman Ringan - Versi 2

Widget ini dibuat sebagai pengganti aplikasi Google Translate yang berat. Murni, dibuat dari kode HTML dan JavaScript, sehingga Anda bisa terbebas dari permintaan HTTP yang biasanya datang dari JavaScript bawaan widget Google Translate. Di sini JavaScript berfungsi untuk melakukan pemformatan URL translasi berdasarkan pola query string dari Google Translate yang berbentuk seperti ini agar kita bisa menuju ke halaman Google Translate tanpa harus terlibat dengannya pada saat awal kunjungan:

http://translate.google.com/translate?u=http://www.nama-situs.com&langpair=from|to&hl=en
  • from ⇒ Bahasa Asal
  • to ⇒ Bahasa Tujuan

Kode Widget 

<style>
#translator-wrapper {
  display:block;
  width:200px;
  border:1px solid #0A340A;
  background-color:white;
  overflow:hidden;
  position:relative;
}
#translator-wrapper select {
  border:none;
  background:transparent;
  font:normal normal 11px Tahoma,Verdana,Arial,Sans-Serif;
  width:100%;
  color:black;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a,
#translator-wrapper a:hover {
  display:block;
  background-color:#0A340A;
  border:none;
  color:white;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:30px;
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:5px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:13px;
  margin-top:-5px;
}
#translator-wrapper a:hover {background-color:#0A2C0A}
#translator-wrapper a:active {background-color:#082408}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
</style>
<h3>Translate this page to:</h3>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected="selected">English</option>
        <option value="id">Indonesian</option>
        <option value="af">Afrikaans</option>
        <option value="sq">Albanian</option>
        <option value="ar">Arabic</option>
        <option value="hy">Armenian</option>
        <option value="az">Azerbaijani</option>
        <option value="eu">Basque</option>
        <option value="be">Belarusian</option>
        <option value="bn">Bengali</option>
        <option value="bg">Bulgarian</option>
        <option value="ca">Catalan</option>
        <option value="zh-CN">Chinese</option>
        <option value="hr">Croatian</option>
        <option value="cs">Czech</option>
        <option value="da">Danish</option>
        <option value="nl">Dutch</option>
        <option value="en">English</option>
        <option value="eo">Esperanto</option>
        <option value="et">Estonian</option>
        <option value="tl">Filipino</option>
        <option value="fi">Finnish</option>
        <option value="fr">French</option>
        <option value="gl">Galician</option>
        <option value="ka">Georgian</option>
        <option value="de">German</option>
        <option value="el">Greek</option>
        <option value="gu">Gujarati</option>
        <option value="ht">Haitian Creole</option>
        <option value="iw">Hebrew</option>
        <option value="hi">Hindi</option>
        <option value="hu">Hungarian</option>
        <option value="is">Icelandic</option>
        <option value="id">Indonesian</option>
        <option value="ga">Irish</option>
        <option value="it">Italian</option>
        <option value="ja">Japanese</option>
        <option value="kn">Kannada</option>
        <option value="ko">Korean</option>
        <option value="la">Latin</option>
        <option value="lv">Latvian</option>
        <option value="lt">Lithuanian</option>
        <option value="mk">Macedonian</option>
        <option value="ms">Malay</option>
        <option value="mt">Maltese</option>
        <option value="no">Norwegian</option>
        <option value="fa">Persian</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="sw">Swahili</option>
        <option value="sv">Swedish</option>
        <option value="ta">Tamil</option>
        <option value="te">Telugu</option>
        <option value="th">Thai</option>
        <option value="tr">Turkish</option>
        <option value="uk">Ukrainian</option>
        <option value="ur">Urdu</option>
        <option value="vi">Vietnamese</option>
        <option value="cy">Welsh</option>
        <option value="yi">Yiddish</option>
    </select><a id="translate-me" href="#" title="Translate!"></a>
</div>
<script>
(function() {
    var mylang = "id", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>

Salin saja kode di atas lalu letakkan di dalam sebuah widget HTML/JavaScript. Klik Simpan dan lihat hasilnya:

Lihat Demo

27 Komentar

  • Unknown

    izin repost di blog saya..
    dengan mencantumkan kode sumber..
    dan sdikit perubahan pada CSSnya..

  • Unknown

    repost + jquery scroll + CSS.. hehehe.. izin dulu ach...

  • abang ichal

    kok sy coba.
    hasilnya error.
    #di browser komputer warnet

    • Taufik Nurrohman

      Errornya di bagian mana? Apa dari halaman Google Translate-nya atau dari link yang tidak mengarah ke tujuan yang benar?

  • Yusril Ibnu Maulana

    sudah saya terapkan di blog saya (http://plustutorial.blogspot.com/), tapi sayangnya saya harus menghapusnya karena tidak valid HTML5, :Ozz

  • Anonim

    Udah saya coba untuk gantiin Google Translator yang emang berat mas.... dan berhasil...
    Makasih banyak...

    Izin duluan nih, jika ada yang nanya akan saya share dan hotlink ke sini ya mas.... :D

  • Unknown

    Terimakasih saya sudah berhasil memakai cara ini walaupun di bantu sama si abang kompiajaib :D

  • Unknown

    keren mas, berhasil. terimakasih kodenya. \o/

  • Tricahyo Abadi

    Terima kasih Mas. Saya mendapatkan ini dari rekomendasi Mas Ady Kompi Ajaib dan MasKolis :)

  • defantri.com

    terima kasih,..
    ayo ganti bendera..

  • Unknown

    Thx gan.. work 10000%... :-bd :-bd

    Visit blog ane gan...
    http://rakasoftware.blogspot.com

  • dhanyn10

    saya juga kak, mau repost-akan saya cantumkan link sumbernya

  • dhanyn10

    Komentar ini telah dihapus oleh pengarang.

  • Unknown

    tadinya gak bisa.. tapi setelah di utak-atik jadi bisa.. :D
    makasih :-bd .

  • Anonim

    Mturnuwun gan..

  • 4mbilhikmah

    \o/ \o/ \o/ mantab

  • Unknown

    thanks infonya gan, udah ane pasang dan emang gak bikin berat blog. nice idea :-bd

  • Suwardi

    Ngak mau mas taufik, "langpair" ngak bisa di save kalau di dalam Templete

  • Being Better

    thx bro infonya.. sdh saya coba n berhasil widgetnya ( template dari maskolis) Kunbal yah.. thx " Jual Tanaman Air AquaScapE Murah dan Berkualitas, Fauna AquaScapE, Peralatan dan Perlengkapan Pendukung AquaScapE. Eceran-Paket-Reseller" aqua5cape.blogspot.com " Hair Grass japan Rp. 15.000,- Glossostigma Rp. 15.000,- Cuba Rp. 15,000.- Stem Plant, Moss, Anubias". aqua5cape.blogspot.com

  • Anonim

    ko saya ga bisa ya mas,, saat menyimpan template ada keterangan The reference to entity "langpair" must end with the ';' delimiter

  • Anonim

    Lajutannya mas :D

    Ternyata udah bisa,, kode "&" pada langpair dan hl=en saya ganti jadi "&"
    :-bd :D

  • Agung Ngurah

    Bisa kejar pagespeed insight angka maksimal nich. Thks Kang

  • Budi Sanjaya

    gan ijin untuk diterapin di salah satu blog saya and repost di blog dengan mencantumkan sumber halaman gan.. terimakasih

  • BKE

    Ijin masukan ke blog saya mas,
    Sumber sudah pasti saya cantumkan,
    Mungkin juga saya redesign sedikit... :D

  • Unknown

    mantap mas translatornya ga bikin berat

  • Harmansyah

    error dihalaman google translatenya mas hompimpa

    Not Found

    The requested URL /translate_p was not found on this server.
    Apache/2.4.10 (Debian) Server at translate.googleusercontent.com Port 80

Komentar telah ditutup.