Cara Pasang Custom Widget Google Translate di Blog

/* Custom Widget Google Translate */
.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;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:4px}
body{top:0!important}
/* Dropdown Google Translate by www.inputekno.com */
.TranslateItm {display:flex;align-items:center;justify-content:center;width:30px;height:30px;}
.TranslateItm svg{width:20px;height:20px;}
.TranslateItm [type="checkbox"]:checked,.TranslateItm [type="checkbox"]:not(:checked){position:absolute;left:-9999px;opacity:0;pointer-events:none}
.TranslateItm .dropdown:checked + label,.TranslateItm .dropdown:not(:checked) + label{position:relative;transition:all 200ms linear;display:-webkit-inline-flex;display:-ms-inline-flexbox}
.TranslateItm .dropdown:checked + label:before,.TranslateItm .dropdown:not(:checked) + label:before{position:fixed;top:0;left:0;content:'';width:100%;height:100%;z-index:-1;cursor:auto;pointer-events:none}
.TranslateItm .dropdown:checked + label:before{pointer-events:auto}
.TranslateItm .section-dropdown{position:absolute;padding:5px;background-color:#fff;font-weight:500;font-size:14px;top:2rem;right:0;max-width:150px;border-radius:4px;border:1px solid #e6e6e6;box-shadow:0 10px 30px -8px rgb(0 0 0 / 15%);z-index:2;opacity:0;pointer-events:none;transform:translateY(20px);transition:all 200ms linear}
.TranslateItm .flex{display:flex}
.TranslateItm .flex.column{width:auto;flex-direction:column;margin-left:-15px}
.TranslateItm span{position:relative;color:#333;transition:all 200ms linear;border-radius:2px;padding:5px 15px;text-align:left;text-decoration:none;display:-ms-flexbox;cursor:default;opacity:.8;}
.TranslateItm .dropdown:checked ~ .section-dropdown{opacity:1;pointer-events:auto;transform:translateY(0)}
.TranslateItm .TranslateC{align-items:center;display:inline-flex;padding:5px 15px;opacity:0.8;font-size:small;border-bottom:1px solid #e6e6e6}
.TranslateItm .active{background:rgb(242 242 242);opacity:1}
/* CSS Darkmode */
.drK .goog-te-gadget-simple:after{background-color:transparent!important;-webkit-transition:all .2s ease;transition:all .2s ease;}
.drK .TranslateItm .section-dropdown{background:#1f2224;border:1px solid rgba(255,255,255,.15)}
.drK .TranslateItm span{color:#fff;opacity:.8;}
.drK .TranslateItm .active{background:#272b2d;opacity:1;}
.drK .TranslateItm .TranslateC{border-bottom:1px solid rgba(255,255,255,.15)}

<!--[ Google Translate Dropdown by www.inputekno.com ]-->
<div class='TranslateItm'>
  <input class='dropdown' id='dropdown' name='dropdown' type='checkbox'/>
  <label class='for-dropdown' for='dropdown'>
    <svg fill="currentColor" height="16" viewBox="0 96 960 960" width="16"><path d="m475 976 181-480h82l186 480h-87l-41-126H604l-47 126h-82Zm151-196h142l-70-194h-2l-70 194Zm-466 76-55-55 204-204q-38-44-67.5-88.5T190 416h87q17 33 37.5 62.5T361 539q45-47 75-97.5T487 336H40v-80h280v-80h80v80h280v80H567q-22 69-58.5 135.5T419 598l98 99-30 81-127-122-200 200Z"></path></svg>
  </label>
  <div class='section-dropdown flex column language'>
    <label class='TranslateC'>Translate</label>
    <span class='language' data-google-lang='en'>Inggris</span>
    <span class='language' data-google-lang='id'>Indonesia</span>
    <span class='language' data-google-lang='ja'>Jepang</span>
    <span class='language' data-google-lang='ar'>Arab</span>
  </div>
</div>

<script type='text/javascript'>//<![CDATA[
/*!***************************************************
 * google-translate.js v1.0.5
 * https://Get-Web.Site/
 * author: Vitalii P.
 *****************************************************/

const googleTranslateConfig = {
    /* Original language */
    lang: "id",

    /* The language we translate into on the first visit*/
    /* langFirstVisit: 'en', */

    /* If the script does not work or does not work correctly, uncomment and specify the main domain in the domain property */
    /* domain: "example.com" */
};

document.addEventListener("DOMContentLoaded", (event) => {
    /* Connecting the google translate widget */
    let script = document.createElement("script");
    script.src = `//translate.google.com/translate_a/element.js?cb=TranslateWidgetIsLoaded`;
    document.getElementsByTagName("head")[0].appendChild(script);
});

function TranslateWidgetIsLoaded() {
    TranslateInit(googleTranslateConfig);
}

function TranslateInit(config) {
    if (config.langFirstVisit && !Cookies.get("googtrans")) {
        /* If the translation language is installed for the first visit and cookies are not assigned */
        TranslateCookieHandler("/auto/" + config.langFirstVisit);
    }

    let code = TranslateGetCode(config);

    TranslateHtmlHandler(code);

    if (code == config.lang) {
        /* If the default language is the same as the language we are translating into, then we clear the cookies */
        TranslateCookieHandler(null, config.domain);
    }

    /* Initialize the widget with the default language */
    new google.translate.TranslateElement({
        pageLanguage: config.lang,
        multilanguagePage: true, // Your page contains content in more than one languages
    });

    /* Assigning a handler to the flags */
    TranslateEventHandler("click", "[data-google-lang]", function (e) {
        TranslateCookieHandler(
            "/" + config.lang + "/" + e.getAttribute("data-google-lang"),
            config.domain
        );
        /* Reloading the page */
        window.location.reload();
    });
}

function TranslateGetCode(config) {
    /* If there are no cookies, then we pass the default language */
    let lang =
        Cookies.get("googtrans") != undefined && Cookies.get("googtrans") != "null"
            ? Cookies.get("googtrans")
            : config.lang;
    return lang.match(/(?!^\/)[^\/]*$/gm)[0];
}

function TranslateCookieHandler(val, domain) {

    let hostname = window.location.hostname;
    // remove any subdomains, e.g. www.example.com -> example.com
    let domainR = hostname.match(/^(?:.*?\.)?([a-zA-Z0-9\-_]{3,}\.(?:\w{2,8}|\w{2,4}\.\w{2,4}))$/)[1];

    /* Writing down cookies /language_for_translation/the_language_we_are_translating_into */
    Cookies.set("googtrans", val);
    Cookies.set("googtrans", val, { domain: "." + document.domain, });
    Cookies.remove('googtrans', { domain: "." + domainR, });

    if (domain == "undefined") return;
    /* Writing down cookies for the domain, if it is assigned in the config */
    Cookies.set("googtrans", val, { domain: domain, });

    Cookies.set("googtrans", val, { domain: "." + domain, });
}

function TranslateEventHandler(event, selector, handler) {
    document.addEventListener(event, function (e) {
        let el = e.target.closest(selector);
        if (el) handler(el);
    });
}

function TranslateHtmlHandler(code) {
    /* We get the language to which we translate and produce the necessary manipulations with DOM */
    if (document.querySelector('[data-google-lang="' + code + '"]') !== null) {
        document
            .querySelector('[data-google-lang="' + code + '"]')
            .classList.add("active");
    }
}
//]]></script>