Widget Google Translate Responsive Pada Blog dengan CSS3

---

U

ntuk blogger Indonesia, Bahasa Indonesia adalah bahasa yang paling umum digunakan untuk mendeskripsikan informasi yang diberikan. Ini dilakukan karena, blogger memang menargetkan pembaca dari Indonesia sebagai target penjangkauan.

Penggunaan bahasa memang menjadi salah satu faktor penentu pengunjung situs sebuah blog. Tapi bagaimana jika turis asing datang berkunjung ke blogmu? Meskipun ada banyak situs web dan aplikasi yang dapat digunakan untuk menerjemahkan penulisannya, rasanya cukup rumit juga.

Seperti yang saya sebutkan di posting saya sebelumnya, seorang blogger juga adalah layanan informasi wajib yang dirancang untuk memberikan semua kemudahan kepada semua pembaca. Nah, terkait dengan topik ini, dapat memudahkan pembaca (luar negeri) dalam menerjemahkan informasi di blog anda dengan memasang Google Terjemahan di setiap situs Halaman.

Dengan fungsi ini, pembaca asing akan lebih mudah memahami informasi yang Anda sediakan
dengan menerjemahkan setiap kata ke dalam bahasa yang mereka ucapkan.
Di platform WordPress atau Blogspot,  anda dapat menggunakan fitur ini dengan menggunakan plugin Translate atau Widget Translate. Meskipun widget Google Translate juga tersedia di Blogger, tampilannya Ada yang sangat sederhana dan mengesankan. Inilah yang menyebabkan banyak Blogger yang suka menggunakan skrip untuk  memodifikasi penampilan menjadi lebih menarik.

Cara Memasang Widget Google Terjemahan Skrip CSS di blog:

• Masuk ke Blog


• Pilih menu tata letak


• Pilih Tambah Gadget


• Pilih HTML/JAVASCRIPT

Tempelkan skrip berikut ke dalam kolom widget:

≮style≯#translator-wrapper {display:block;width:90%;max-width:300px;border:none;background-color:#fff;co

#translator-wrapper select {border:none;background:transparent;font-family:’Verdana’, Arial, sans

#translator-wrapper a, #translator-wrapper a:hover {display:block;background-color:#4791d2;border

#translator-wrapper a:before {content:””;display:block;width:0;height:0;border:6px solid transpar

#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,

option {background:#444;color:#e0e0e0}

≮/style>

<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=”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() {

window.open(‘http://translate.google.com/translate?u=’ + encodeURIComponent(location.href) + ‘&la

return false;

};

})();

</script>

pilih simpan

Selesai

 Baca Juga --  BEGINI CARA NYA MEMBUAT WIDGET MELAYANG (STICKY WIDGET) DI BLOG DENGAN MUDAH - VERSI MOBILE /PC BERHASIL

catatan

1. Untuk menambahkan bahasa, tambahkan kode berikut ke skrip CSS di atas:

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

Penutup

Meskipun sebagian besar pengunjung blog Anda berasal dari Indonesia, gunakan widget untuk memudahkan orang dari luar negeri. Selain itu, widget ini hanya memiliki ukuran pemuatan yang kecil, jadi tidak terlalu merepotkan kecepatan memuat blog.

Cukup sekian artikel tentang Widget Google Translate Responsive Pada Blog dengan CSS3 Terima kasih untuk blog ini.

Keyword

widget, google translate, google terjemahan