Membuat widget Translate mode pilihan (opsi) di blogger

Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat widget translator mode opsi di blogger

Info: Jika kamu penasaran demgan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama

Widget Translate mode opsi

Seperti widget translate sebelumnya yang admin posting, khusus kali ini widget translate mode opsi di blogger merupakan fitur untuk menterjemahkan halaman secara cepat, kamu bisa menentukan sendiri bahasa apapun yang ingin kamu tampilkan pada widget translate mode opsi ini

Cara kerja dari widget translator mode opsi ini adalah jika di aktifkan maka seluruh text paling atas pada halaman blog akan terlebih dahulu di terjemahkan, sedangkan cara untuk mengaktifkan translate, pilih saja bahasa apa yang ingin di terjemahkan kumudian secara otomatis semua halaman anda yang terdapat text di dalamnya akan langsung di terjemahkan

Contoh Tampilan

Jika kamu penasaran dengan contoh tampilan dari widget penerjemah mode pilihan di blogger silahkan periksa menggunakan tombol di bawah ini ya sobat

Periksa

Warning: Jika tampilan translate tidak berfungsi, karena admin juga menggunakan source kode yang sama pada blog ini, silahkan kamu coba saja di template blog kamu ya sobat 😁

Cara pembuatan

Baiklah sobat ICloudzer sekalian sekarang saatnya admin bakalan menjabarkan mengenai cara membuat widget translate mode opsi di blogger, silahkan baca dan ikuti setiap arahan yang admin jabarkan di bawah ini ya sobat

1. Silahkan login ke blogger menggunakan akun google milik anda, Selanjutnya pergi ke menu Theme atau Tema kemudian pilih menu Edit HTML
2. Langkah selanjutnya adalah salin kode javascript di bawah ini, kemudian taruh di atas kode </head>

<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahTrans.min.js'/>

3. Jika sudah silahkan salin kode di bawah ini, kemudian taruh di atas kode </body>

<style>.rahTransCl::after{content:'\2715';font-size:14px}</style>
<input class='rahTransI hidden' id='rahTransI' type='checkbox'/>
<div class='rahTransW'>
<div class='rahTransH' data-text='Translator'>
<label class='rahTransCl' for='rahTransI'/>
</div>
<div class='rahTransP'>
<div class='googleTrans hidden' id='_google_translator_element'/>
</div>
</div>
<label class='fCls' for='rahTransI'/>
<script>/*<![CDATA[*/
var rahBahasaKu53 = "id"; /* Change with your bahasa */
var rahBahasaMu53 ="en,hi,gu,bn,ta,te,mr,ar,ne,zh-CN,id,ur,th,tr,vi,ja,ko,tl"; /* Manage your bahasa */
/*]]>*/</script>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/rahLazyTrans53.js'/>

Info: Kode di atas jangan di edit atau di ubah (kecuali kode javascript untuk mengelola bahasa blog kamu) entar fungsi widget translator nya nggak berfungsi lagi, dan jika ingin mengetahui kode bahasa secara lengkap silahkan periksa disini

4. Kemudian agar widget translate mode opsinya muncul saat di klik, silahkan gunakan fungsi <label class='rahTrans' for='rahTrm' atau tambahkan class='rahTrans' for='rahTransI' pada tombol translate yang kamu inginkan, atau jika bingung silahkan lihat contoh kode berikut ini

<label class='rahTrans tIc bIc b-Ic' expr:aria-label='data:item' for='rahTransI' onclick='vibRate(53)'><b:include name='translate-icon'/><span id='google_translate_element'/></label>

Info: Kode di atas hanya sebagai contoh tombol translate yang menggunakan for='rahTransI' sebagai fungsi untuk menampilkan widget translator nya

5. Jika di rasa sudah silahkan simpan template dan lihat bagaimana hasilnya ya sobat