How to add a Google Translate Widget for Automatic Translation | Multilanguage

Like many of us in the forum and GitHub issues, I’ve been looking for the best way to make my Publii sites multilingual. Although I haven’t yet found an efficient way of localizing my site (besides duplicating it entirely), I did stumbled upon this video today: https://www.youtube.com/watch?v=5meQKQhGBZg

Although I don’t understand the language, I was more or less able to follow along and use the script to create a toolbar to display automatic translations on my Publii site. Even though this solution might not be great for SEO, it’s a great short-term solution for me.

Here are the instructions for anyone interested…

I pasted the following code into Tools > Custom HTML > Footer:

<script src="https://translate.google.com/translate_a/element.js?cb=loadGoogleTranslate"></script>
<script>
function loadGoogleTranslate() {
new google.translate.TranslateElement ("google_element");
}
</script>

I then pasted the following < div > where I wanted my widget to appear. I placed mine in the footer because it was less of a headache than the navbar, but it can be placed anywhere:

<div id="google_element"></div>

And that’s it! I made some additional CSS changes as well to remove Google branding, style the < select >, and remove the top bar:

/* Remove google translate banner and branding */
.goog-te-banner-frame {
display: none; /* Remove Google banner at the top */
}

body {
position: unset !important; /* Remove space created by Google banner at the top */
}

.goog-logo-link, .goog-logo-link:link, .goog-logo-link:visited, .goog-logo-link:hover, .goog-logo-link:active {
display: none; /* Remove Google logo below language switcher dropdown */
}
.goog-te-gadget {
font-size: 0px !important;
color: transparent !important;
/* Remove "Powered by" text below language switcher dropdown */
}
.goog-te-combo, .goog-te-banner *, .goog-te-ftab *, .goog-te-menu *, .goog-te-menu2 *, .goog-te-balloon * {
font-family: var(--body-font) !important; /* change font of language switcher dropdown to match site */
color: var(--light) !important; /* make text in dropdown white */
}

select.goog-te-combo {
padding-right: 1.2rem !important; /* reduce padding obscuring language name */
padding: .2rem .8rem; /* make lang switcher thinner */
}

select.goog-te-combo option {
background: var(--dark) !important; /* make dropdown dark */
}

@media all and (max-width:37.4375em) {
#google_element {
padding: 2rem .4rem; /* add padding when screen becomes smaller and footer items are stacked */
}