Membuat widget translator (penerjemah halaman) di blogger (update:26/09/2023)

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

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

Widget Tranlate

Widget translate atau widget penerjemah di blogger adalah fitur untuk menterjemahkan seluruh text ke dalam bahasa tertentu atau yang dipilih, nah cara kerjanya akan di tampilkan beberapa bahasa dan untuk memfungsikan nya pengguna blog anda bisa mengklik bahasayang di ingkan untuk mulai menterjemahkan halaman website anda

Contoh Tampilan

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

Periksa

Info: Bagaimana sobat keren sekali yak sobat 😁

Cara pembuatan

Baiklah sobat ICloudzer sekalian sekarang saatnya admin bakalan menjabarkan mengenai cara membuat widget translate 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>/*<![CDATA[*/ 
/*! js-cookie v3.0.5 by ICloudice.com | MIT */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self,function(){var n=e.Cookies,o=e.Cookies=t();o.noConflict=function(){return e.Cookies=n,o}}())}(this,(function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)e[o]=n[o]}return e}var t=function t(n,o){function r(t,r,i){if("undefined"!=typeof document){"number"==typeof(i=e({},o,i)).expires&&(i.expires=new Date(Date.now()+864e5*i.expires)),i.expires&&(i.expires=i.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var c="";for(var u in i)i[u]&&(c+="; "+u,!0!==i[u]&&(c+="="+i[u].split(";")[0]));return document.cookie=t+"="+n.write(r,t)+c}}return Object.create({set:r,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],o={},r=0;r<t.length;r++){var i=t[r].split("="),c=i.slice(1).join("=");try{var u=decodeURIComponent(i[0]);if(o[u]=n.read(c,u),e===u)break}catch(e){}}return e?o[e]:o}},remove:function(t,n){r(t,"",e({},n,{expires:-1}))},withAttributes:function(n){return t(this.converter,e({},this.attributes,n))},withConverter:function(n){return t(e({},this.converter,n),this.attributes)}},{attributes:{value:Object.freeze(o)},converter:{value:Object.freeze(n)}})}({read:function(e){return'"'===e[0]&&(e=e.slice(1,-1)),e.replace(/(%[\dA-F]{2})+/gi,decodeURIComponent)},write:function(e){return encodeURIComponent(e).replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g,decodeURIComponent)}},{path:"/"});return t}));
/*]]>*/</script>

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

<input class='rahTrm hidden' id='rahTrm' type='checkbox'/>
<input class='rahDrpTr hidden' id='rahDrpTr' type='checkbox'/>
<div class='rahTrM' data-text='Translate Mode'>
<label aria-label='简体中文' rah-data-lang='zh-CN' data-text='简体中文' onclick='vibRate(53)' role='button'></label>
<label aria-label='Indonesia' rah-data-lang='id' data-text='Indonesia' onclick='vibRate(53)' role='button'></label>
<label aria-label='English' rah-data-lang='en' data-text='English' onclick='vibRate(53)' role='button'></label>
<label class='n' aria-label='日本' rah-data-lang='ja' data-text='日本' onclick='vibRate(53)' role='button'></label>
<label class='n' aria-label='عربي' rah-data-lang='ar' data-text='عربي' onclick='vibRate(53)' role='button'></label>
<!--<label class='n' aria-label='your_lang' rah-data-lang='lang_code' data-text='your_lang' onclick='vibRate(53)' role='button'></label>-->
<!--<label class='n' aria-label='your_lang' rah-data-lang='lang_code' data-text='your_lang' onclick='vibRate(53)' role='button'></label>-->
<!--<label class='n' aria-label='your_lang' rah-data-lang='lang_code' data-text='your_lang' onclick='vibRate(53)' role='button'></label>-->
<label class='a ml' aria-label='More lang' for='rahDrpTr' onclick='vibRate(53)' role='button'>
<svg class='line d' viewBox='0 0 24 24'><g transform='translate(5.000000, 8.500000)'><path d='M14,0 C14,0 9.856,7 7,7 C4.145,7 0,0 0,0'/></g></svg>
</label>
</div>
<label class='fCls' for='rahTrm' onclick='vibRate(53)'/>
<script>/*<![CDATA[*/ 
var BahasaId53 = "icloudice.com"; /* change with your url domain */
var BahasaMu53 = "id"; /* Change with your language code */
/*]]>*/</script>
<script src='https://cdn.jsdelivr.net/gh/rahcode-ui/icloudice@dewa/users/js/Translate53.min.js'/>

Info: Kode di atas jangan di edit atau di ubah entar fungsi widget translator nya nggak berfungsi lagi, dan jika ingin mengetahui kode bahasa secara lengkap silahkan periksa disini

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

<label class='tTrans tIc bIc b-Ic' expr:aria-label='data:item' for='rahTrm' 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='rahTrm' sebagai fungsi untuk menampilkan widget translator nya

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