Cara Memasang Widget Translate Bahasa didalam Artikel Blog


KURAZONE ~ Halo sahabat Kurazer, pada kesempatan yang lalu saya pernah membahas mengenai Kemudahan Pengunjung Bule untuk Membaca Artikel Indonesia menggunakan fitur Translate dari aplikasi Gogole Chrome, dimana pada artikel tersebut sudah saya sampaikan kelebihan dan kekurangannya.

Nah, pada kesempatan kali ini saya bahas kembali namun fitur tersebut bisa dipasang kedalam blog dengan tampilan yang lebih menarik seperti dibawah ini :

Cara Memasang Widget Translate Bahasa didalam Artikel Blog

Copy kode dibawah ini, lalu letakkan (paste) diatas </body>

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Copy kode dibawah ini dan letakkan (paste) diatas kode ]]></b:skin>

div#google_translate_element div.goog-te-gadget-simple {border: none;background-color: transparent;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value:hover {text-decoration: none;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span {color: #512b58;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span:hover {color:#512b58;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(213, 213, 213);"] {display: none;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(118, 118, 118);"] {display: none;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="color: rgb(155, 155, 155);"] {display: none;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left: 1px solid rgb(187, 187, 187);"] {display: none;}div#google_translate_element div.goog-te-gadget-simple a.goog-te-menu-value span[style="border-left-color: rgb(187, 187, 187); border-left-width: 1px; border-left-style: solid;"] {display: none;}.goog-te-banner-frame.skiptranslate {display: none !important;}body {top: 0px !important}[class~=post-body]{-webkit-touch-callout:none;}
.kuratranslate{text-align:center;background:#9CE4FF;color:black;padding:10px;margin-bottom:10px;border-radius: 10px;}

Kode Bebas

Untuk kode yang satu ini peletakannya bebas, bisa diatas artikel atau dibawah artikel. Karena tiap-tiap template memiliki struktur yang berbeda maka kalian bisa mengeksplor sendiri tempatnya. Jika template kalian strukturnya sama dengan punya nya kurazone maka kalian bisa menempatkan kode ini dibawah kode <div class='entry-content-wrap'>, yang nantinya akan tampil diawal artikel.
<div class="kuratranslate">This content uses Indonesian, <b>please change to your language</b> by pressing the translate button below. <br/>Thank you for your visit.
<div id='google_translate_element'/></div>
<script type='text/javascript'> function googleTranslateElementInit() {new google.translate.TranslateElement({pageLanguage: &#39;id&#39;, includedLanguages: &#39;id,en,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr&#39;,
layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, &#39;google_translate_element&#39;);}
  $(&quot;.hover&quot;).mouseleave(
    function () {
      $(this).removeClass(&quot;hover&quot;);
    }
  );</script>

KELEBIHAN DAN KEKURANGAN

Kelebihan :

  1. Artikel bisa dibaca oleh Pengunjung luar negeri menggunakan bahasa mereka sendiri
  2. Dapat mentranslate bahasa Indonesia ke bahasa lain.
  3. Tidak perlu memuat ulang halaman Blog, karena hasil translatenya real-time
  4. Bahasa yang dipilih tersimpan di Cache

Kekurangan :

  1. Karena kodenya menggunakan JS, maka tentu saja akan membebani loading blog, tapi tak seberapalah karena fitur translatenya sepadan dengan kualitasnya.
  2. Belum sepenuhnya akurat mentranslate bahasa gaul
  3. Hasil translate tidak terdeteksi di SERP

NOTE :
  1. Apabila kalian ingin menambahkan pilihan bahasa pada widgetnya, kalian bisa mengedit bagian id,en,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr ; pisahkan dengan koma. Bagian tersebut adalah Kode Bahasa untuk menampilkan bahasa. Lebih lengkapnya bisa check disini : http://www.lingoes.net/en/translator/langcode.htm
  2. Ganti kode #9CE4FF menjadi kode warna lain untuk mengubah warna background pada widget translate.
  3. Ganti teks : This content uses Indonesian, <b>please change to your language</b> by pressing the translate button below. <br/>Thank you for your visit. sesuai selera kalian
Itulah informasi mengenai "Cara Memasang Widget Translate Bahasa didalam Artikel Blog", selamat mencoba dan semoga bermanfaat. Goodluck!





أحدث أقدم