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"].
Finally, Google translate button is ready to translate the content of your page.
Example
Step 2 => Next Add a reference to the translate API .
<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>
Example
Step 3 => Next add a javascript function.
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
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
<html>
<head>
<title>Live Messages</title>
</head>
<body>
<h1>Live Messages</h1>
</body>
</html>