Sign in

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

  • This topic has 6 replies, 3 voices, and was last updated 2 months, 2 weeks ago by .
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #7008
    candidexmedia

    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 */
    }

     

    #7009
    candidexmedia

    The forum deleted  my div code, but it’s:

    < div id=”google_element”></ div>

    (remove the spaces before div)

    You can also find the code here: https://github.com/GetPublii/Publii/issues/850#issuecomment-1059703636

    #7010
    Bob

    @candidexmedia thanks for the tip.

    PS: I’ve edited the snippet with a div, and now you can see it in the original post.

    --
    Do you appreciate the support you've received today? If so, consider donating to the Publii team by clicking here; we'll be sure to use your donation to make Publii even better!

    #7015
    candidexmedia

    @candidexmedia thanks for the tip.

    PS: I’ve edited the snippet with a div, and now you can see it in the original post.

    Thanks Bob!

    #7270
    jomocu
    #7274
    candidexmedia

    Try my plugin 🙂

    https://forum.getpublii.com/topic/plugin-simple-website-translator/

    Cool, I’ll give it a look. Would be great to be able to toggle which languages to display or hide from the list.

    #7285
    candidexmedia

    I’ve figured out how to include only specific languages, all thanks to this comment and this article.

    I’ve updated the code in the following gist with full instructions: https://gist.github.com/candidexmedia/03c0b74ca88a4bdec06cf0148d6758ad

    I’ve also incorporated some of the elements from jomocu’s plugin.

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.