Widget Translator Halaman · Versi 2
Tabel Konten

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:
27 Komentar
Unknown
izin repost di blog saya..
dengan mencantumkan kode sumber..
dan sdikit perubahan pada CSSnya..
Taufik Nurrohman
:-d :-d :-d :-d :-d :-d :-d
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