Translate Inggris, Cara Membuat Widget Translate HTML Blog Ringan

Selamat malam semua, senang sekali malam ini masih ada waktu buat nulis ini blog, pada malam ini saya akan memberikan sedikit informasi yang mungkin bermanfaat bagi sahabat semuanya, khususnya yang sedang berniat untuk mempermak / mempercantik desain blog-nya. Disini ada sedikit secript yang akan saya share kepada anda, script ini saya rasa sangat bermanfaat untuk digunakan dalam membangun sebuah blog yang Seo Friendly, yang dapat memanjakan para pengunjung setia blog sehingga mereka betah berlama-lama berselancar di dalam blog yang kita miliki.

Baca juga: Cara Meningkatkan Traffic Website atau Blog

Jika anda berniat untuk mulai serius mengurusi blog, coba pelan-pelan anda berfikir sepertinya apakah ada yang kurang tentang ini blog yang anda miliki ?, pemikiran itu akan muncul ketika mungkin anda berniat akan men-share blog anda kepada teman-teman yang ada di forum luar negeri misalnya Grup facebook dari eropa. Coba kita berfikir, bagaimana mungkin mereka bisa mengerti isi dari blog kita sedangkan semua isi blog kita kebanyakan menggunakan bahasa Indonesia. Saya pun mulai berinisiatif untuk memberikan sebuah "translator" agar mereka bisa menerjemahkan isi blog saya ini ke dalam bahasa inggris dengan mudah dan cepat tanpa harus copy paste ke dalam google tranlate terlebih dahulu.

Ternyata memasang gadget Translate dari google di blog itu sangatlah mudah, tidak sampai 1 menit sudah jadi. Tetapi setelah beberapa waktu saya pakai, saya mulai merasakan pada saat saya membuka blog saya terutama jika kecepatan internet agak lemot, wah terasa lama banget loadingnya, saya pun mencoba membuang dulu gadget translate bawaan blogger dan blog saya pun menjadi tidak se-lemot seperti sebelumnya. Setelah mencari informasi sana-sini akhirnya saya menemukan permasalahan yang baru saja saya hadapi, ternyata gadget bawaan blogger itu sangatlah berat dan sangat mempengaruhi sekali kecepatan loading blog pada saat dibuka.

Setelah beberapa waktu berlalu akhirnya saya menemukan info mengenai script translator blog yang ringan, dan tentunya tidak berpengaruh pada kecepatan loading suatu blog, akhirnya saya pakai dan syukurlah semua bisa berjalan lancar. Jika anda ingin memasangnya di blog anda silahkan ikuti caranya dibawah ini.

Baca juga: Cara Membuat Navbar Blog Menjadi Tidak Terlihat

Widget ini dibuat sebagai pengganti aplikasi Google Translate yang berat. Script ini 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.

Langkah pertama yang harus anda lakukan adalah:

1. Copy script dibawah ini,
2. Paste-kan di dalam sebuah widget HTML/JavaScript.

3. Klik Simpan dan lihat hasilnya:

<style type="text/css">#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 type="text/javascript">(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>

Baca juga: Cara Bikin Blog SEO, 5 Istilah Yang Wajib Diketahui

Demikian sedikit script yang bisa saya bagikan pada artikel Translate Inggris, Cara Membuat Widget Translate HTML Blog Ringan untuk anda malam ini, semoga bermanfaat bagi kemajuan blog anda, salam blogger Indonesia.