Hello sobat icloudzer kali ini admin bakalan menjabarkan mengenai bagaimana caranya membuat dan memasang fitur translate google di blogger, ringan dan responsif tentunya
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Fitur Translate
Bagi sebuah website memiliki fitur translate adalah hal terpenting, bayangkan jika pengunjung blog anda tidak hanya berasal dari Indonesia tetapi juga dari luar negeri, pastinya jika bahasa penulisan anda adalah bahasa Indonesia, pastinya pembaca anda dari luar negeri tidak akan memahami apa yang anda katakan
Ringan dan responsif
Jika kamu memasang fitur translate yang saya berikan ini, maka nantinya fitur translate tersebut sangat cepat dan juga ringan, sedangkan bahasa halaman website sudah di tentukan kedalam bahasa Indonesia, dan bahasa custom lainnya akan muncul saat pengguna mengklik tombol translate tersebut
Kode Terenskripsi
Seperti yang sudah admin jelaskan sebelumnya bahwa bahasa default halaman website sudah ditentukan ke dalam bahasa Indonesia, dan kode script nantinya juga akan admin kasih dalam mode terenkripsi, jadi kamu tidak bisa mengubah kode apapun di dalam script semisal menambahkan bahasa lainnya selain bahasa yang sudah admin tetapkan di dalam script tentunya
Contoh Tampilan
Untuk melihat contoh tampilan dari fitur translate tersebut silahkan klik aja tombol di bawah ini untuk memeriksa
Info: Bagaimana sobat dengan contoh tampilan nya keren sekali yak, mungkin jika langsung di terapkan di template sobat tampilan nya akan berfungsi 100%, insyaallah 🥰
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjabarkan mengenai bagaimana caranya membuat fitur translate di website atau di blogger, silahkan lihat dan ikuti setiap arahan yang admin jabarkan sebentar lagi, namun kamu harus memastikan kamu telah memasang script jQuery di bawah ini
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'/>Info: Jika sudah memasang jquery tersebut silahkan lanjutkan tutorial cara membuat translate google di blogger versi terbaru
Kode CSS
Seperti biasanya silahkan salin kode CSS di bawah ini, kemudian letakkan di atas kode ]]></b:skin
/* Google Transalte by ICloudice.com */ .goog-te-banner-frame.skiptranslate, .goog-te-gadget-simple img, img.goog-te-gadget-icon, .goog-te-menu-value span, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-logo-link, .goog-te-balloon-frame{display:none!important} .goog-text-highlight{background-color: transparent !important;box-shadow:none !important;-webkit-box-shadow:none !important} .goog-te-menu-frame{box-shadow:none!important} .goog-te-gadget-simple{background-color:transparent!important;border:none!important;outline:0 !important;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important} #google_translate_element{position:absolute !important;z-index:2 !important;overflow:hidden !important} #google_translate_element, .skiptranslate.goog-te-gadget, .goog-te-gadget-simple{width:40px !important;height:40px !important;padding:0 !important;margin:0 !important;border-radius:50% !important}Info: Atau kamu bisa menggunakan tag kode <style> untuk meletakkan kode CSS di atas
Kode Javascript
Langkah selanjutnya yang bisa kamu lakukan adalah menyalin kode Javascript di bawah ini kemudian kamu bisa meletakkan nya di atas kode </body>
<script>
/*<![CDATA[*/
var _0x1845=["\x72\x61\x68\x54\x72\x61\x6E\x73","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x42\x79\x49\x64","\x73\x63\x72\x6F\x6C\x6C","\x73\x63\x72\x6F\x6C\x6C\x54\x6F\x70","\x64\x6F\x63\x75\x6D\x65\x6E\x74\x45\x6C\x65\x6D\x65\x6E\x74","\x62\x6F\x64\x79","\x73\x63\x72\x69\x70\x74","\x63\x72\x65\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x74\x79\x70\x65","\x74\x65\x78\x74\x2F\x6A\x61\x76\x61\x73\x63\x72\x69\x70\x74","\x61\x73\x79\x6E\x63","\x73\x72\x63","\x2F\x2F\x74\x72\x61\x6E\x73\x6C\x61\x74\x65\x2E\x67\x6F\x6F\x67\x6C\x65\x2E\x63\x6F\x6D\x2F\x74\x72\x61\x6E\x73\x6C\x61\x74\x65\x5F\x61\x2F\x65\x6C\x65\x6D\x65\x6E\x74\x2E\x6A\x73\x3F\x63\x62\x3D\x67\x6F\x6F\x67\x6C\x65\x54\x72\x61\x6E\x73\x6C\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74\x49\x6E\x69\x74","\x67\x65\x74\x45\x6C\x65\x6D\x65\x6E\x74\x73\x42\x79\x54\x61\x67\x4E\x61\x6D\x65","\x69\x6E\x73\x65\x72\x74\x42\x65\x66\x6F\x72\x65","\x70\x61\x72\x65\x6E\x74\x4E\x6F\x64\x65","\x68\x69\x64\x64\x65\x6E","\x72\x65\x6D\x6F\x76\x65","\x63\x6C\x61\x73\x73\x4C\x69\x73\x74","\x61\x64\x64\x45\x76\x65\x6E\x74\x4C\x69\x73\x74\x65\x6E\x65\x72","\x69\x64","\x61\x72\x2C\x65\x6E\x2C\x68\x69\x2C\x62\x6E\x2C\x74\x61\x2C\x74\x65\x2C\x6E\x65\x2C\x69\x64","\x53\x49\x4D\x50\x4C\x45","\x49\x6E\x6C\x69\x6E\x65\x4C\x61\x79\x6F\x75\x74","\x54\x72\x61\x6E\x73\x6C\x61\x74\x65\x45\x6C\x65\x6D\x65\x6E\x74","\x74\x72\x61\x6E\x73\x6C\x61\x74\x65","\x67\x6F\x6F\x67\x6C\x65\x5F\x74\x72\x61\x6E\x73\x6C\x61\x74\x65\x5F\x65\x6C\x65\x6D\x65\x6E\x74"];var lazyts=!1;var rahTrans=document[_0x1845[1]](_0x1845[0]);window[_0x1845[19]](_0x1845[2],function(){(0!= document[_0x1845[4]][_0x1845[3]]&& !1=== lazyts|| 0!= document[_0x1845[5]][_0x1845[3]]&& !1=== lazyts)&& (!function(){var _0x4cb8x3=document[_0x1845[7]](_0x1845[6]);_0x4cb8x3[_0x1845[8]]= _0x1845[9],_0x4cb8x3[_0x1845[10]]=!0,_0x4cb8x3[_0x1845[11]]= _0x1845[12];var _0x4cb8x4=document[_0x1845[13]](_0x1845[6])[0];_0x4cb8x4[_0x1845[15]][_0x1845[14]](_0x4cb8x3,_0x4cb8x4);if(rahTrans!= null){rahTrans[_0x1845[18]][_0x1845[17]](_0x1845[16])}}(),lazyts=!0)},!0);function googleTranslateElementInit(){ new google[_0x1845[25]].TranslateElement({pageLanguage:_0x1845[20],includedLanguages:_0x1845[21],layout:google[_0x1845[25]][_0x1845[24]][_0x1845[23]][_0x1845[22]]},_0x1845[26])}/*]]>*/
</script>Info: Kode script di atas sudah di enskritpsi so tidak ada akses atas kamu untuk mengeditnya
Tombol translate
Setelah melakukan penginstallan kode CSS dan kode javascript, selanjutnya agar mode dan fitur translate nya bisa muncul silahkan salin dan gunakan kode HTML di bawah ini, kemudian letakkan di bagian header blog atau terserah deh di bagian mana, yang jelas bahwa tombol translate tersebut berfungsi saat pengguna mengkliknya
<li class="rahTrans hidden" id="rahTrans">
<span aria-label="Translate" class="" role="button">
<svg class="line" viewbox="0 0 24 24">
<path d="M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z">
</path>
<path d="M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4">
</path>
<line x1="17" x2="13.5" y1="19.5" y2="23.5">
</line>
<line class="svgC" x1="14.5" x2="21.5" y1="10.5" y2="10.5">
</line>
<line class="svgC" x1="17.5" x2="17.5" y1="9.5" y2="10.5">
</line>
<path class="svgC" d="M20,10.5c0,1.1-1.77,4.42-4,6">
</path>
<path class="svgC" d="M16,13c.54,1.33,4,4.5,4,4.5">
</path>
<path class="svgC" d="M10.1,7.46a4,4,0,1,0,1.4,3h-4">
</path>
</svg>
<span id="google_translate_element">
</span>
</span>
</li>Info: Jika bingung letkkan kode nya di bagian mana, silahkan cari kode </header> kemudian letakkan kode HTML di atas tepat di atasnya