How ToJavaScriptMake Web StoriesQuiz GeneratorFAQ Schema GeneratorTable Maker3schools TranslateMore Tools..
Sophia
Sophia 7/17/2022

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

How to use google translate button on a Website/Blogger 

 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.

 Learn how to add google translate button on Your Website/Blogger 

Step 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>
Step 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>
Step 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 types of buttons for the Google Translate button.

Horizontally

Example
<!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
Example
<!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
Example
<!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
2 Answers
Share

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

2
How to use google translate button on a Website/Blogger   You must add Google Translate bu…
asked
2 answers

2 Answers

Related Posts (More answers below)
  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