How To Google Translate - W3Schools

How TO - Google Translate ❮ Previous Next ❯

Learn how to add a Google Translate button on your web page.

Example

Try it Yourself »

Google Translate Button

Start with a simple basic web page.

Add a <div> element with the id "google_translate_element":

Example

<!DOCTYPE html> <html><body> <h1>My Web Page</h1> <div id="google_translate_element"></div> </body><html>

Add a reference to the translate API at google.com:

Example

<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

Add a javascript function:

Example

<script type="text/javascript">function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element'); }</script>

And you are ready to translate the content of your page:

Example

<!DOCTYPE html><html lang="en-US"><body><h1>My Web Page</h1><p>Hello everybody!</p><p>Translate this page:</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> Try it Yourself »

Button Modes

There are currently three different design modes for the Google Translate button.

Example

Vertically:

Try it Yourself »

Example

Horizontally:

Try it Yourself »

Example

A dropdown menu, with no other text:

Try it Yourself » ❮ Previous Next ❯ +1 Sign in to track progress

Từ khóa » H Google Dịch