Given below is a simple HTML page, which has scripts for Google Translator-
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
-
- <head>
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>Google Translator - Basic Translation</title>
- <style>
- body {
- top: 0 !important;
- }
-
- .goog-te-banner-frame {
- display: none;
- }
- </style>
- </head>
-
- <body>
- <div id="google_translate_element">
- </div>
- <script type="text/javascript">
- function googleTranslateElementInit() {
- new google.translate.TranslateElement({
- pageLanguage: 'en',
- layout: google.translate.TranslateElement.InlineLayout.SIMPLE
- }, 'google_translate_element');
- }
- </script>
- <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
- <br />
- <div>
- Hi, Good morning! This is a simple text for testing the Google's translator.
- </div>
- </body>
-
- </html>
While running page, shown above, in the Browser, Google automatically creates a dropdown structure at the top of the page, inside div provided by us with ID "google_translate_element".
![]()
We can reposition this div to our desired position, using css.
The default language was set as English. While clicking the dropdown, we will get a list of languages, available for the translation.
![]()
Clicking on any of the language will make a complete Webpage translated to that particular language. Here, the Webpage is translated to Spanish.
![]()
For more details of implementing a translator in your Website, please visit this
link. Hope, this will be helpful for someone out there.