Cara Membuat Widget Google Translate Keren Di Blog

Cara Membuat Widget Google Translator Multi Bahasa Di Blog - Widget translator atau translate ini berguna untuk menerjemahkan teks yang ada di blog kamu ke berbagai bahasa. Widget Google translate ini akan sangat berguna untuk blog yang memiliki trafik yang tinggi dan tersebar luas ke seluruh dunia. 

Baca Juga Cara Mengubah dan Mengedit Template Blog Agar Valid AMP Dengan Mudah

Para pengunjung blog kamu yang berasal dari non-lokal akan merasa sangat terbantu dengan adanya widget Google translate ini. Karena mereka bisa membaca artikel blog kamu tanpa harus melakukan pemindahan bahasa di settingan browser yang sedang digunakan. Tapi cukup mengklik widget translate ini kemudian tinggal di pilih saja bahasa apa yang ingin di terapkan pada blog.

Cara memasang widget Google translate ini juga tidak susah-susah amat. Dan tidak terlalu memberatkan loading blog kamu. Widget Google Translate yang saya maksud dan yang akan kita pasang seperti gambar dibawah ini.

Widget ini menggunakan CSS ya, bukan menggunakan widget bawaan yang di sediakan oleh Blogger. Jadi mungkin akan sedikit memberatkan loading blog kamu. Tapi untuk masalah desain, sudah pasti ini lebih keren dan terlihat lebih profesional.

Kalau kamu tertarik memasang widget Google translate ini di blog kamu, kamu bisa ikuti langkah-langkah dibawah ini untuk memasang widget Google translate ini di blog. Tapi sebelum lanjut, buatlah sebuah konsep terlebih dahulu untuk masalah penerapan widget ini. Kamu bisa pasang widget ini di bagian header blog (seperti gambar diatas), widget sidebar atau navigasi menu.

Cara Membuat dan Memasang Widget Google Translator / Translate Multi Bahasa Di Blog

1. Buka dashboard blogger kamu » masuk ke menu Theme » Edit HTML
2. Kemudian tambahkan CSS Google Translate dibawah ini ke dalam template kamu. Taruh sebelum ]]></b:skin> atau </style>

   /* CSS Google Translate By Dzuhalah */
   #google_translate_element{padding:0;margin-right:0;margin-top:0}
   .goog-te-banner-frame
   .skiptranslate,
   .goog-te-gadget-simple img,img.goog-te-gadget-icon,
   .goog-te-menu-value span{display:none!important}
   .goog-te-menu-frame{box-shadow:none!important}
   .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23161617'/%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all 
   .2s ease;transition:all 
   .2s ease;background-size:20px 20px;display:inline-block;font-weight:400;line-height:1.8;padding:0 6px;text-align:center;white-space:nowrap;vertical-align:middle;-ms-touch-action:manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:4px}body{top:0!important}

3. Kemudian tambahkan kode dibawah ini untuk memasang widget ikon translate ini di blog. Seperti yang sudah saya bilang, kamu bisa pasang ikon ini di header blog dan yang lainnya. Tapi saran saya pasang ikon ini di header blog saja. Agar tampilan widget-nya tidak merusak tampilan blog.

   <div id='google_translate_element'></div>

   Kalau blog kamu support mode gelap, gabungkan CSS dibawah ini dengan CSS yang pertama tadi.

   .darkMode 
   .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all 
   .2s ease;transition:all 
   .2s ease;background-size:20px 20px}

4. Langkah terakhir kamu taruh JavaScript dibawah ini diatas tag </body>.

   <script>/*<![CDATA[*/
   var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/translategoogle@main/translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
   /*]]>*/
   </script>
   <script>
   function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:&#39;id&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
   </script>

5. Kalau semua susunan kode diatas sudah dipasang di template blog kamu dengan benar, klik simpan tema dan lihat hasilnya.

Nah, itulah tutorial cara memasang widget Google translate keren berupa ikon dengan CSS yang bisa saya sampaikan di artikel kali ini. Semoga membantu bagi yang membutuhkan. Kalau masih bingung atau mengalami masalah saat penerapan markup, tanyakan langsung di kolom komentar.

Baca Juga