Add Google Translation Widget to My Site

05 Jul, 2025

I’m aware that Hugo has built-in multilingual support and it’s pretty easy to set it up Multilingual mode, but I’m too lazy to write one more version in another language for the content. So I was looking for a fast and free solution to translate the blogs as I know I will feel like writing sometimes in English and sometimes in Chinese. I followed this tutorial and added the Google Translate button to my site in just 5 minutes.

Implementation

The implementation was straightforward - I added the Google Translate widget to my Hugo site using the theme’s custom_body.html partial. Here’s what I did:

Created the widget in layouts/partials/custom_body.html with the Google Translate script
Configure pageLanguage (I set it to ‘auto’) and includedLanguages (you can find the language codes here)
Styled the widget in ~~static/custom.css~~ custom_body.html to appear as an element in the top-right corner with a clean design. I additionally added styling for mobile screens so the widget stays at the top-right on mobile but scrolls with the page instead of being fixed and covering the texts:

/* On smaller screens, make it non-fixed but keep top-right position */
@media (max-width: 1270px) {
    #google_translate_element {
    position: absolute;
    top: 10px;
    right: 10px;
    }
}

As you can see, the widget now appears on every page of the site, making it easy for visitors to read content in their preferred language. While the translation might not be perfect, it’s easy and good enough for a personal blog where I want flexibility to write in different languages without the overhead of maintaining translations!

Troubleshooting: Production Styling Issues

Problem: After deployment, the Google Translate widget appeared at the bottom of pages without any custom styling, showing Google’s default appearance.

Root Cause: Google Translate script loads after CSS and injects inline styles that override my custom CSS. This is a common issue with Google Translate widgets.

Solution: Move the CSS to load after the widget with !important declarations to ensure it overrides Google’s injected styles.

Updated Implementation

Instead of putting the CSS in a separate file, I moved it directly into custom_body.html after the Google Translate script:

<!-- Google Translate Widget -->
<div id="google_translate_element"></div>

<!-- Google Translate Script -->
<script type="text/javascript">
  function googleTranslateElementInit() {
    new google.translate.TranslateElement({
      pageLanguage: 'auto',
      includedLanguages: 'zh-CN,en,ja,ko,fr,de,es,it,ru,ar',
      layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
      autoDisplay: false
    }, 'google_translate_element');
  }
</script>
<script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

<!-- Google Translate Custom Styles -->
<style>
#google_translate_element {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 9999 !important;
    background: #fff !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.1) !important;
    font-size: 14px !important;
}

@media (max-width: 1270px) {
    #google_translate_element {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
    }
}

.goog-te-gadget img {
    display: none !important;
}
</style>

Key Points:

CSS loads after the Google Translate script
!important declarations ensure your styles override Google’s inline styles
Works consistently across preview and production environments
Maintains responsive design for mobile devices

#Danniverse #Dev