Cara Memasang Widget Google Translate dengan Script CSS di Blog

GEMA.MY.ID

Wednesday, September 23, 2020

Cara Memasang Widget Google Translate dengan Script CSS di Blog - Bagi blogger tanah air, Bahasa Indonesia menjadi bahasa yang paling umum digunakan untuk mendeskripsikan informasi yang diberikan. Hal tersebut dilakukan karena, blogger tersebut memang menargetkan pembaca dari Indonesia sebagai target jangkauan.

Penggunaan bahasa memang menjadi salah satu faktor penentu dari pengunjung yang datang di sebuah blog. Namun, bagaimana jadinya jika ada pengunjung dari luar negeri yang berkunjung ke blog Anda? Walaupun sudah banyak situs dan aplikasi yang bisa digunakan untuk menerjemahkan sebuah tulisan, tetap saja itu masih terasa rumit.

Seperti yang telah saya sebutkan di artikel-artikel sebelumnya, seorang blogger yang juga merupakan pelayan informasi wajib untuk memberikan segala kemudahan kepada semua pembaca. Nah, berkaitan dengan topik kali ini, Anda bisa lebih memudahkan pembaca (luar negeri) dalam menerjemahkan informasi di blog Anda dengan memasang Google Translate di setiap halaman.

Dengan fitur tersebut, pembaca dari luar negeri akan lebih mudah mengerti informasi yang Anda berikan dengan menerjemahkan setiap kata ke dalam bahasa yang mereka gunakan.

Pada platform WordPress, Anda bisa menggunakan fitur ini dengan menggunakan plugin yang disediakan. Walaupun widget Google Translate juga disediakan di Blogger, namun tampilan yang ada sangatlah sederhana dan terkesan apa adanya. Hal tersebutlah yang menyebabkan banyak blogger yang lebih memilih menggunakan skrip yang telah dimodifikasi sedimikian rupa dengan tampilan yang lebih menarik.

Cara Memasang Widget Google Translate dengan Script CSS di Blog

Masuk ke BLOGGER
Pilih menu TATA LETAK
Pilih TAMBAHKAN GADGET
Pilih HTML / JAVASCRIPT
Tempel script berikut ini ke dalam kolom gadget tersebut:

#translator-wrapper {display:block;width:90%;max-width:300px;border:none;background-color:#fff;color:#444;overflow:hidden;position:relative;height:40px;line-height:40px;border:1px solid #e0e0e0}
#translator-wrapper select {border:none;background:transparent;font-family:’Verdana’, Arial, sans-serif;font-size:12px;width:100%;color:#444;-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:#4791d2;border:none;color:#fff;margin:0 0;text-decoration:none;position:absolute;top:0;right:0;bottom:0;cursor:pointer;width:14%;transition:all 0.3s ease}
#translator-wrapper a:before {content:””;display:block;width:0;height:0;border:6px solid transparent;border-left-color:white;position:absolute;top:50%;left:45%;margin-top:-5px}
#translator-wrapper a:hover {opacity:0.9}
#translator-wrapper a:active {opacity:0.9}
#translator-wrapper select:focus, #translator-wrapper a:focus, #translator-wrapper select:active, #translator-wrapper a:active {border:none;outline:none;cursor:pointer}
option {background:#444;color:#e0e0e0}

<div id=”translator-wrapper”>
<select id=”translate-language”>
<option 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>

Pilih SIMPAN
Selesai.

Catatan

Untuk menambahkan bahasa, tambahkan kode berikut ke dalam script CSS di atas:

<option value="Kode bahasa">Nama negara</option>

Penutup

Walaupun pengunjung blog Anda kebanyakan dari negara Indonesia, tidak ada salahnya untuk menggunakan widget tersebut sebagai kemudahan bagi mereka yang berasal dari luar negeri. Selain itu, widget ini hanya memiliki ukuran pemuatan yang kecil sehingga tidak terlalu membebani kecepatan pemuatan blog.

Cukup sekian artikel tentang Cara Memasang Widget Google Translate dengan Script CSS di Blog ini, Terima kasih.

Cancel