Cara Memasang Widget Google Translate (Multi-Language) di Blogger Mirip Seperti Blog ANDRIE ID

andrie.id - Cara Memasang Widget Google Translate (Multi-Language) di Blogger Mirip Seperti Blog ANDRIE ID. Pada awalnya google translate menyediakan widget gratis yang bisa di-costumisasi untuk ditambahkan ke halaman blog pada Google Translate Manager. Namun sepertinya saat ini fitur halaman tersebut sudah tidak ada lagi, dan pengguna harus berlangganan alias bayar untuk bisa menggunakannya.

Jika Anda menggunakan blogger, sebenarnya fitur tersebut masih bisa ditambahkan melalui pengaturan widget yang ada di menu 'Tata Letak'. Namun sayangnya tidak bisa di-customisasi secara langsung, Anda harus mengubah sendiri untuk bisa tampil mirip seperti blog ANDRIE ID atau bentuk lainnya. 

Cara Memasang Widget Google Translate di Blog

Nah bagi Anda yang ingin tampilan widget Google Translatenya mirip seperti punya saya silahkan ikuti panduan pembuatannya dibawah ini:

Pertama, Login ke Blogger.com

Untuk bisa menambahkan widget google translate di blog sudah pasti Anda harus login terlebih dahulu ke akun blogger yang Anda miliki. Pastikan pula Anda adalah pemilik atau administrator dari blog yang ingin ditambahkan widget google translate-nya. 

Kedua, Kustomisasi Tampilan Widget Google Translate

Pada langkah kedua ini, silahkan kustomisasikan tampilan widget google translate Anda di blog. Mulai dari peletakkan, ide tampilan, atau malah ingin seperti saya saja yang polos dan translatenya hanya sebagian dari beberapa negara saja? Simak panduannya dibawah ini terkait pada langkah ketiga:

1. Pilih menu 'Tema'
2. Klik tombol 'panah bawah' yang berada di sebelah kanan tombol sesuaikan
3. Silahkan pilih teks 'Edit HTML', maka akan muncul barisan kode template blog Anda
4. Silahkan cari kode ini </head> atau <head/> , lalu silahkan tambah kode dibawah ini tepat diatas tag kode </head> atau <head/>.

<!-- Google Translate Script -->
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- Google Translate Style -->
<style>
#google_translate_element_position {
position:fixed; bottom:60px; right:15px; z-index:9999999999;
}
</style>

5. Terakhir, simpan template blog Anda. 

Jika ingin memodifikasi tampilan widget google translatenya, silahkan ubah pada bagian yang saya tandai, seperti posisinya, lokasi penempatan diatas (top) atau dibawah (bottom), sebelah kanan (right) atau kiri (left), dan untuk z-index dibiarkan saja seperti itu.

Ketiga, Tambahkan Widget Google Translate (Multi-Language) di Blog

Pastikan sebelumnya Anda sudah menentukan penempatan widget google translate ini di Blog Anda. Maka dari itu silahkan tambahkan kode html dan javascript dibawah ini di lokasi penempatan yang Anda tentukan... 

<div id="google_translate_element_position" class="hidden-sm hidden-xs"><div id="google_translate_element"></div></div>
<script type="text/javascript">
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'bg,bs,ca,co,zh-CN,cs,cy,da,de,el,en,es,et,fa,fi,fr,fy,ga,gd,gl,he,hu,iw,is,it,ka,la,lb,lt,lv,mk,nl,no,pl,pt,ro,ru,sk,sl,sq,sr,sv,tr,uk,zh', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}
</script>

Selesai.

Pada panduan diatas akan menambahkan sebuah widget google translate (Multi Language) di blog dan menempatkannya di bagian atas sebelah kanan. Jika Anda ingin mengubah tampilannya, atau lokasinya Anda bisa melakukan kostumisasi pada Langkah Kedua. 

Selamat, sekarang Anda sudah memiliki widget google translate hasil kustomisasi Anda sendiri. Semoga bisa bermanfaat. See you.  

Share :