Website translator widget

Pro Tips Other Tips
1

Here’s an HTML code for a language translator widget using Google Translate’s built-in functionality. This widget allows users to translate your website content into multiple languages:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Language Translator Widget</title>
    <style>
        /* Widget container styling */
        #google_translate_element {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 9999;
            background: white;
            padding: 10px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        /* Dropdown styling */
        .goog-te-combo {
            padding: 8px 12px;
            border-radius: 4px;
            border: 1px solid #ddd;
            background-color: #f8f9fa;
            color: #333;
            cursor: pointer;
        }

        /* Hide Google branding */
        .goog-te-gadget {
            color: transparent !important;
        }

        .goog-te-banner-frame {
            display: none !important;
        }

        /* Language list styling */
        .goog-te-menu-value {
            color: #333 !important;
        }

        /* Hover effects */
        .goog-te-combo:hover {
            background-color: #e9ecef;
        }

        /* Mobile responsiveness */
        @media (max-width: 480px) {
            #google_translate_element {
                bottom: 10px;
                right: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Your website content -->
    <h1>Welcome to Our Multilingual Website</h1>
    <p>This content will be automatically translated to your preferred language.</p>

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

    <script>
        function googleTranslateElementInit() {
            new google.translate.TranslateElement({
                pageLanguage: 'en',
                includedLanguages: 'en,es,fr,de,it,pt,ru,zh-CN,ja,ko,ar,hi',
                layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
            }, 'google_translate_element');
        }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

</body>
</html>

Key Features:

  1. Fixed position widget in the bottom-right corner
  2. Custom styling for the dropdown menu
  3. Support for 12 major languages (modifiable)
  4. Mobile-responsive design
  5. Hidden Google branding
  6. Shadow effect and hover states
  7. Automatic translation of page content

Customization Options:

  1. Change position by modifying the position, bottom, and right properties
  2. Add more languages to the includedLanguages list (comma-separated language codes)
  3. Modify colors by changing the CSS variables
  4. Adjust the layout (horizontal/vertical) using the layout property
  5. Change default language by modifying pageLanguage

Limitations:

  1. Requires internet connection
  2. Uses Google Translate’s free version
  3. Translations might not be 100% accurate
  4. Dynamic content added via JavaScript might not auto-translate

To Use:

  1. Simply copy this code into your HTML file
  2. Place it before the closing </body> tag
  3. Customize the included languages and styling as needed

The widget will automatically translate all text content on your page while maintaining the original layout and structure. Users can select their preferred language from the dropdown menu.

3 Likes