Mecha versi 2.6.3 sudah dirilis!

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

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

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.