
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.
- 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>
- Next Add a reference to the translate API .
Example
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
- 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
save
listen
AI Answer
How to add google translate button on a Website/Blogger using javascript
2
You must add Google Translate button in your website so that the viewers can easily read…
asked
Sophia
2 answers
2915
You must add Google Translate button in your website so that the viewers can easily read…
Answer Link
answered
Sophia
<html>
<head>
<title>Live Messages</title>
</head>
<body>
<h1>Live Messages</h1>
</body>
</html>