Sign in

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

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

    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
    Avatar photocandidexmedia

    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
    Avatar photoBob

    @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
    Avatar photocandidexmedia

    @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
    Avatar photojomocu
    #7274
    Avatar photocandidexmedia

    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
    Avatar photocandidexmedia

    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.