Cara Custom Tampilan Google Translate Di Blogger

 www.azid45.web.id - Cara Membuat Tampilan Google Translate Sesuai Keinginan di Blogger Kita. Ketika kita menggunakan widget google translate di website atau blogger tentunya secara default terlihat meresahkan dan kurang menarik untuk dipandang. Hal ini tentunya kita sebagai pecinta blogger akan mencari cara yang sesuai dengan kebutuhan dan keinginan kita agar widget tetap bisa terpasang dengan tampilan yang kita butuhkan.

Untuk memperoleh tampilan sesuai kebutuhan dan keinginan kita dalam menggunakan widget google translate ternyata sangat mudah. Kita tinggal menggunakan script yang disediakan oleh google, yang bisa jadi kita jarang menjumpainya.

Script ini menggunakan Cookie dalam menyimpan data dan perubahan saat pengunjung ingin mengubah bahasa pada blog atau website kita. Dengan script ini tampilan pilihan bahasa bisa kita sajikan sesuai keinginan kita tanpa menggunakan bawaan pilihan dari widget google translate itu sendiri. Hal yang harus kita butuhkan hanyalah mengetahui id setiap bahasa yang kita butuhkan, seperti id untuk bahasa Indonesia, us untuk bahasa Inggris, ar untuk bahasa Arab dan lain sebagainya.

Baiklah langsung saja, bagi teman-teman yang membutuhkan script ini bisa ambil langsung dalam tutorial berikut ini. Tapi perlu diperhatikan bahwasannya script ini adalah script dasar ya. Jadi untuk tampilan CSS, HTML, dan tambahan Javascript teman-teman harus mengembangkannya sendiri sesuai kebutuhan.

Kode CSS

Kode in untuk menghilangkan (hidden) tampilan default dari widget google translate

#goog-gt-tt, #google_translate_element, .VIpgJd-ZVi9od-ORHb-OEVmcd, .cookie-choices-info, .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, .goog-te-menu-frame, .goog-te-menu-value span, img.goog-te-gadget-icon {
    display: none !important;
}

Kode HTML

Kode ini digunakan untuk mengganti bahasa asli dengan bahasa lain sesuai keinginan pengunjung blog Anda. Anda bisa menghapus kode yang tidak diperlukan atau mengubah class dalam kode HTML ini. Hal yang tidak boleh Anda ubah adalah atribute data-google-lang karena ini yang akan kita ambil data untuk mengubah bahasanya.

<ul>
<li class='language def' data-google-lang='id'>Default Language</li>
<li class='language ar' data-google-lang='ar'>Arabic</li>
<li class='language eu' data-google-lang='eu'>Basque</li>
<li class='language bn' data-google-lang='bn'>Bengali</li>
<li class='language bg' data-google-lang='bg'>Bulgaria</li>
<li class='language ca' data-google-lang='ca'>Catalan</li>
<li class='language hr' data-google-lang='hr'>Croatian</li>
<li class='language cs' data-google-lang='cs'>Czech</li>
<li class='language zh-CN' data-google-lang='zh-CN'>Chinese</li>
<li class='language da' data-google-lang='da'>Danish</li>
<li class='language nl' data-google-lang='nl'>Dutch</li>
<li class='language en-GB' data-google-lang='en-GB'>English (UK)</li>
<li class='language en' data-google-lang='en'>English (US)</li>
<li class='language et' data-google-lang='et'>Estonian</li>
<li class='language tl' data-google-lang='tl'>Filipino</li>
<li class='language fi' data-google-lang='fi'>Finnish</li>
<li class='language fr' data-google-lang='fr'>French</li>
<li class='language de' data-google-lang='de'>German</li>
<li class='language el' data-google-lang='el'>Greek</li>
<li class='language hi' data-google-lang='hi'>Hindi</li>
<li class='language hu' data-google-lang='hu'>Hungarian</li>
<li class='language is' data-google-lang='is'>Icelandic</li>
<li class='language id' data-google-lang='id'>Indonesian</li>
<li class='language it' data-google-lang='it'>Italian</li>
<li class='language ja' data-google-lang='ja'>Japanese</li>
<li class='language kn' data-google-lang='kn'>Kannada</li>
<li class='language ko' data-google-lang='ko'>Korean</li>
<li class='language lv' data-google-lang='lv'>Latvian</li>
<li class='language lt' data-google-lang='lt'>Lithuanian</li>
<li class='language ms' data-google-lang='ms'>Malay</li>
<li class='language no' data-google-lang='no'>Norwegian</li>
<li class='language pl' data-google-lang='pl'>Polish</li>
<li class='language pt-PT' data-google-lang='pt-PT'>Portugal</li>
<li class='language ro' data-google-lang='ro'>Romanian</li>
<li class='language ru' data-google-lang='ru'>Russian</li>
<li class='language sr' data-google-lang='sr'>Serbian</li>
<li class='language zh-TW' data-google-lang='zh-TW'>Taiwan</li>
<li class='language sk' data-google-lang='sk'>Slovak</li>
<li class='language sl' data-google-lang='sl'>Slovenian</li>
<li class='language es' data-google-lang='es'>liish</li>
<li class='language sw' data-google-lang='sw'>Swahili</li>
<li class='language sv' data-google-lang='sv'>Swedish</li>
<li class='language ta' data-google-lang='ta'>Tamil</li>
<li class='language th' data-google-lang='th'>Thailand</li>
<li class='language uk' data-google-lang='uk'>Ukrainian</li>
<li class='language ur' data-google-lang='ur'>Urdu</li>
<li class='language vi' data-google-lang='vi'>Vietnamese</li>
<li class='language cy' data-google-lang='cy'>Welsh</li>
</ul>

Kode Javascript

Ini kode dasar dan saya rasa tidak perlu Anda ubah kecuali default bahasanya. Secara default dalam script ini adalah Indonesia (id). Bila ingin default bahasa selain ini Anda bisa mengubah pada bagian lang: "id".

// Cookie Library
!function(e,t){var r,n;"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(r=(e="undefined"!=typeof globalThis?globalThis:e||self).Cookies,(n=e.Cookies=t()).noConflict=function(){return e.Cookies=r,n})}(this,function(){"use strict";function e(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)e[n]=r[n]}return e}return function t(r,n){function i(t,i,o){if("undefined"!=typeof document){"number"==typeof(o=e({},n,o)).expires&&(o.expires=new Date(Date.now()+864e5*o.expires)),o.expires&&(o.expires=o.expires.toUTCString()),t=encodeURIComponent(t).replace(/%(2[346B]|5E|60|7C)/g,decodeURIComponent).replace(/[()]/g,escape);var u="";for(var f in o)o[f]&&(u+="; "+f,!0!==o[f]&&(u+="="+o[f].split(";")[0]));return document.cookie=t+"="+r.write(i,t)+u}}return Object.create({set:i,get:function(e){if("undefined"!=typeof document&&(!arguments.length||e)){for(var t=document.cookie?document.cookie.split("; "):[],n={},i=0;i<t.length;i++){var o=t[i].split("="),u=o.slice(1).join("=");try{var f=decodeURIComponent(o[0]);if(n[f]=r.read(u,f),e===f)break}catch(c){}}return e?n[e]:n}},remove:function(t,r){i(t,"",e({},r,{expires:-1}))},withAttributes:function(r){return t(this.converter,e({},this.attributes,r))},withConverter:function(r){return t(e({},this.converter,r),this.attributes)}},{attributes:{value:Object.freeze(n)},converter:{value:Object.freeze(r)}})}({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:"/"})});

const googleTranslateConfig = {
    lang: "id"
};

function TranslateWidgetIsLoaded() {
    TranslateInit(googleTranslateConfig)
}

function TranslateInit(a) {
    a.langFirstVisit && !Cookies.get("googtrans") && TranslateCookieHandler("/auto/" + a.langFirstVisit);
    let e = TranslateGetCode(a);
    TranslateHtmlHandler(e), e == a.lang && TranslateCookieHandler(null, a.domain), new google.translate.TranslateElement({
        pageLanguage: a.lang,
        multilanguagePage: !0
    }), TranslateEventHandler("click", "[data-google-lang]", function (e) {
        TranslateCookieHandler("/" + a.lang + "/" + e.getAttribute("data-google-lang"), a.domain), window.location.reload()
    })
}

function TranslateGetCode(a) {
    return (void 0 != Cookies.get("googtrans") && "null" != Cookies.get("googtrans") ? Cookies.get("googtrans") : a.lang).match(/(?!^\/)[^\/]*$/gm)[0]
}

function TranslateCookieHandler(a, e) {
    let t = window.location.hostname.match(/^(?:.*?\.)?([a-zA-Z0-9\-_]{3,}\.(?:\w{2,8}|\w{2,4}\.\w{2,4}))$/)[1];
    Cookies.set("googtrans", a), Cookies.set("googtrans", a, {
        domain: "." + document.domain
    }), Cookies.remove("googtrans", {
        domain: "." + t
    }), "undefined" != e && (Cookies.set("googtrans", a, {
        domain: e
    }), Cookies.set("googtrans", a, {
        domain: "." + e
    }))
}

function TranslateEventHandler(a, e, t) {
    document.addEventListener(a, function (a) {
        let n = a.target.closest(e);
        n && t(n)
    })
}

function TranslateHtmlHandler(a) {
    null !== document.querySelector('[data-google-lang="' + a + '"]') && document.querySelector('[data-google-lang="' + a + '"]').classList.add("active")
}
document.addEventListener("DOMContentLoaded", a => {
    let e = document.createElement("script");
    e.src = "//translate.google.com/translate_a/element.js?cb=TranslateWidgetIsLoaded", document.getElementsByTagName("head")[0].appendChild(e)
});

Untuk tutorialnya Anda bisa klik button "Terjemahkan Blog Ini" pada sidebar blog saya.

Itulah kode dasar dalam membuat widget google translate dengan tampilan yang bisa di custom sesuai kebutuhan dan keinginan Anda. Semoga bermanfaat.

Kalau ingin tampilan keren dan menarik, Anda bisa menghubungi saya dan saya akan membantu Anda untuk mengekspresikan yang Anda butuhkan tentunya dengan imbalan buat ngopi sebesar 50K ya.