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.
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 di atas), widget sidebar atau navigasi menu.
Cara Membuat dan Memasang Widget Google Translator / Translate Multi Bahasa Di Blog
- Buka dashboard blogger kamu » masuk ke menu Theme » Edit HTML
- 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} - 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} - 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:'id',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")}); </script> - 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.
Waah keren mas widget nya. Ini yg saya cari dari dulu baru Nemu tutornya disini
ReplyDeleteIni yang saya cari-cari.Terima kasih atas tutorialnya mas. Sayangnya, saya yang orang awam ini, menerima beberapa masalah kecil saat memasang script dari mas.
ReplyDelete1. Icon google translate hanya akan keluar jika halaman di-scroll (seperti lazy image).
2. Banner google untuk menerjemahkan muncul secara otomatis dibagian atas saat halaman di-scroll. Walaupun cukup mengganggu, sebenarnya poin ini tidak terlalu menjadi masalah jika pengunjung menggunakan desktop/tablet. Namun jika pengunjung menggunakan hp, pengunjung tidak dapat dapat menutup banner tersebut karena banner tadi tidak responsive (close button-nya tidak muncul dilayar).
Saya harap komentar saya ini dapat menjadi masukan bagi mas dan saya juga berharap mas-nya mau untuk meng-update script-nya agar dapat berfungsi dengan lebih baik lagi. Saya tunggu artikel-artikel menarik lainnya dari mas. Terima kasih :).
untuk icon google translate memang sengaja di pasang lazy load agar tidak terlalu berat. nanti akan saya update lagi dlm waktu dekat
DeleteTerima kasih banyak tutorialnya, admin.
DeleteSudah saya terapkan ini ke blog saya, umaralhuseini,com
Cara atur posisinya biar pas di header blog itu gimn ya mas?
ReplyDelete