3schools

Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Sophia
Sophia January 21, 2023 . #Blogger . #GoogleTranslate
❌

How to add google translate button on a Website/Blogger using javascript

 You must add Google Translate button in your website so that the viewers can easily read your article using their own language. 

 Benefit : It will increase the number of viewers and also revenues.

 How to add google translate button on Your Website 

There are only three steps to implement a custom google translate button on your website.

  1. At first you need to add a <div> element with the id "google_translate_element" such as [id="google_translate_element"]. Example 
    <html>
  <head><title>Google Translate Button</title> 
 </head>
 <body>
  <h2>This is a simple web page.</h2>
  <div id="google_translate_element"></div>
 </body>
</html>
  2. Next Add a reference to the translate API . Example 
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  3. Next add a javascript function. Example 
    <script type="text/javascript">
 function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
 }
</script>

{pageLanguage: 'en'} here 'en' is your webpage Language. You can change it if your webpage language is different. Like :- Hindi = hi, Bengali = bn , German = de


Finally, Google translate button is ready to translate the content of your page.

Example 
<html>
  <head>
    <title>Google Translate Button</title> 
  </head>
 <body>
 <h2>This is a simple web page.</h2>
 <p>This is a simple web page and you can translate the content of this page by selecting your language in the select box</p>
 <div id="google_translate_element"></div>
 <script type="text/javascript">
  function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
  </script>
  <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
 </body>
</html>

Button Modes 

 There are currently three type of buttons for the Google Translate button.

Horizontally 
<!DOCTYPE html>
<html>
 <head>
  <title>Google Translate Button</title> 
 </head>
<body>
 <h2>This is a simple web page.</h2>
 <p>
  This is a simple web page and you can translate the content of this page by selecting your language in the select box
 </p>
 <div id='google_translate_element'></div>
 <script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
      }, 'google_translate_element');
    }
  </script>
 <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
 <p>
  This example displays a HORIZONTAL translate button.
 </p>
 </body>
</html>
Try It Yourself Vertically 
<!DOCTYPE html>
<html>
 <head>
  <title>Google Translate Button</title> 
 </head>
<body>
 <h2>This is a simple web page.</h2>
 <p>This is a simple web page and you can translate the content of this page by selecting your language in the select box</p>
 <div id='google_translate_element'></div>
 <script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
      }, 'google_translate_element');
    }
  </script>
 <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
 <p>This example displays a VERTICAL translate button.</p>
</body>
</html>
Try It Yourself Dropdown Button 
<!DOCTYPE html>
<html>
 <head>
  <title>Google Translate Button</title> 
 </head>
<body>
 <h2>This is a simple web page.</h2>
 <p>This is a simple web page and you can translate the content of this page by selecting your language in the select box</p>
 <div id='google_translate_element'></div>
 <script>
  function googleTranslateElementInit() {
      new google.translate.TranslateElement({
        pageLanguage: 'en',
        autoDisplay: 'true',
        layout: google.translate.TranslateElement.InlineLayout.SIMPLE
      }, 'google_translate_element');
    }
  </script>
 <script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit'></script>
 <p>This example displays a VERTICAL translate button.</p>
</body>
</html>
Try It Yourself
how to google translate a website,how to add google translate button on a Website/Blogger,translate google,how to use google translate,how to translate a web page,how to google translate a page,how to translate a website to english,how to translate google page,how to google translate a website,how to translate language in google
Pdf
Save
Listen

2 Answers

  1. Apu
    <!DOCTYPE html>
    <html>
    <head>
    <title>Live Messages</title>
    </head>
    <body>
    <h1>Live Messages</h1>
    </body>
    </html>
    Reply Delete
    Share
  2. thanks alot
    Reply Delete
    Share
Write An Answer
back