Hallo guys, kali ini admin Mrchllaja akan membagikan artikel Widget Google Translate Di Blogger untuk kalian.
Apa Itu Google Translate?
Google translate merupakan alat untuk menerjemahkan kalimat/kata dari satu bahasa ke bahasa lainnya.
Alat ini juga digunakan sebagai widget atau penerjemah agar pengunjung website dapat menerjemah artikel sesuai bahasa yang mereka inginkan.
Ingin cara memasangnya? yuk liat tutorialnya dibawah ini :)
Cara Memasang Widget Google Translate Di Blogger
Step 1: buka website Blogger, lalu ke Tema, pilih Edit HTML
Step 2: cari kode </style> atau ]]></b:skin>
Step 3: salin kode dibawah ini lalu letakkan diatas kode </style> atau ]]></b:skin>
/* 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 Sesuaikan Jika Berbeda Hapus Bagian Ini*/
.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)}
Bagian yang saya beri tanda .drK sesuaikan dengan css darkmode template kalian, jika berbeda hapus bagian CSS Darkmode tersebut
Bagian /* Dropdown Google Translate */Sesuaikan dengan dropdown template kalian.
Step 4: berikutnya salin kode dibawah ini lalu paste Header atau Menu Navigasi pada blog kalian
<!--[ Google Translate Dropdown ]-->
<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>
Kalian bisa menambahkan daftar bahasa sesuai yang kalian inginkan.
<span class='language' data-google-lang='en'>Bahasa</span> : Untuk menambahkan daftar bahasa gunakan kode berikut
Kode atribut yang di tandai adalah bahasa yang akan di tampilkan. en, id, ja, ar adalah daftar bahasa menurut ISO 639.
Jika kalian ingin melihat daftar lengkap kode yang tersedia dan kode ISO 639 yang bisa digunakan kalian bisa cek di halaman berikut :
https://cloud.google.com/translate/docs/languages
Step 5: lanjut, cari kode </head> lalu salin kode cookie js dibawah ini letakkan diatas kode</head>
<script src='https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js'/>
Step 5: terakhir salin kode dibawah ini lalu tempel diatas kode </body>
<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>
Javascript di atas merupakan sumber asli Vitalii P dari Get-Web (https://github.com/get-web/). Jangan menghapus komentar sebagai bentuk kredit atau penghormatan.
Ganti kode bahasa pada lang: "id" dengan bahasa default blog kalian.
Saat pengunjung mengubah bahasa, cookie akan ditambahkan dengan kunci googtrans dan nilai /id/en, /id adalah bahasa default dan /en adalah bahasa yang di pilih sebagai terjemahaan
Setelah semua langkah di atas tadi sudah selesai, jangan lupa save template kalian dan lihat hasilnya!
Sekian, artikel Widget Google Translate Di Blogger ini, semoga bermanfaat bagi kalian.
Referensi:
https://www.inputekno.com