Cara Pasang Widget Google Translate Blog

Tambahkan tombol translate yang dipersonalisasi ke Blog yang didukung oleh Google Terjemahan.

<b:includable id='main'>
  <b:include name='widget-title'/>
  <div class='widget-content'>
    <style>/*<![CDATA[*/.goog-te-gadget span,body>.skiptranslate{display:none!important}body[style*=top]{top:auto!important}body[style*=top] font{background:0 0!important;box-shadow:none!important}.goog-te-gadget{color:transparent!important;font-size:0px!important}.googtrans{--gtrans-padding:0.75rem;--gtrans-font:"Roboto",sans-serif;font-family:var(--translate-font)}.googtrans select{font-family:var(--gtrans-font);padding:var(--gtrans-padding);padding-right:calc(var(--gtrans-padding) + 20px + .5rem);-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:var(--gtrans-font-size, 1rem);border:1px solid var(--gtrans-border-color,#d4d4d4);color:var(--gt-color,#171717);border-radius:.5rem;background-image:var(
    --gtrans-svg,
    url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="i i-language" viewBox="0 0 24 24" fill="none" stroke="%23a3a3a3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h14M9 2v3m4 0q-2 8-9 11m2-7q2 4 6 6m1 7 5-11 5 11m-1.4-3h-7.2"/></svg>')
  );background-color:var(--gtrans-bg,#fff);background-size:20px;background-position:center right var(--gtrans-padding);background-repeat:no-repeat;cursor:pointer;transition:border-color .3s,box-shadow .3s;width:100%;margin:0!important}.googtrans select:focus,.googtrans select:hover{border-color:var(--gtrans-accent,#14b8a6)}.googtrans select:focus{outline:0;box-shadow:0 0 0 3px var(--gtrans-accent-focus,rgba(20,184,166,.25))}/*]]>*/</style>
    <data:content/>
    <script>//<![CDATA[
      const transContainer=document.getElementById("translate");function gtInit(){new google.translate.TranslateElement({autoDisplay:"true",pageLanguage:transContainer.dataset.lang||"en",includedLanguages:transContainer.dataset.languages||"",layout:google.translate.TranslateElement.InlineLayout.HORIZONTAL},"translate")}document.addEventListener("DOMContentLoaded",t=>{if(window.gtranslate)return;let a=document.createElement("script");a.src="https://translate.google.com/translate_a/element.js?cb=gtInit",document.head.appendChild(a),window.gtranslate=!0});//]]>
    </script>
  </div>
</b:includable>

Widget google translate alat penerjemah yang memungkinkan pengunjung blog membaca konten dengan bahasa yang sesuai dengan mereka. Dipembahasan sebelumnya, saya sempat membagikan tutorial cara menerapkannya di blog yang dapat di Kustomisasi sesuai kebutuhan.

Artikel kali ini kita akan berbagi cara serupa tetapi memasangnya menggunakan API Google Translate tanpa perlu melakukan konfigurasi tambahan.

Cara Instal

Tekan tombol instal di atas, lalu pilih blog yang akan dipasangkan widget Google translate.
Saat mengedit gadget, kamu dapat menentukan bahasa default di atribut data-lang dan bahasa yang dapat diterjemahkan di data-languages, sesuai dalam format ISO 639-1

Tekan tombol instal di atas, lalu pilih blog yang akan dipasangkan widget Google translate.

<div data-lang='id' data-languages='en,zh-CN,ar,ms' class='googtrans' id='translate'></div>

Jika kamu ingin menggunakan semua bahasa yang tersedia, cukup hapus atribut data-languages atau biarkan value atribut tersebut kosong.

Setelah widget terinstal, kamu bisa menambahkan CSS berikut untuk mengubah beberapa tampilan tombol widget agar sesuai dengan blog kamu.

.googtrans {
  --gtrans-bg: #fff;
  --gtrans-color: #171717;
  --gtrans-border-color: #d4d4d4;
  --gtrans-accent: #14b8a6;
  --gtrans-accent-focus: rgb(20 184 166 / 25%);
  --gtrans-font: "Roboto", sans-serif;
  --gtrans-font-size: 1rem;
  --gtrans-svg: url('data:image/svg+xml,<svg/></svg>');
}

Sesuaikan

Untuk menyesuaikan konten apa yang tidak boleh di terjemahkan, kamu harus menambahkan class notranslate pada konten tersebut.

<p class='notranslate'>Your_paragraph</p>

Penutup

Itu tadi cara menambahkan widget google translate di blog. Meskipunpun sederhana, Google Terjemahan adalah salah satu opsi terbaik untuk menerjemahkan konten secara real time. Semoga artikel ini bisa bermanfaat. Kamu juga bisa share dan rekomendasikan ke teman yang membutuhkan.