Add Google translate button on your webpage of blogger
Google Translate is a free online language translation service that allows you to translate text from one language to another.
You can add the Google Translate widget to your website or blog, which will allow your visitors to translate your content into their preferred language.
But here I will provide the actual button format through which you can actually translate the homepage or any post page to a specific language through buttons.
This is not the default translate widget of google it is a pure button format. You don't need any Google translate API. You only need the HTML code and nothing.
Here is the HTML Code.
——————————————————————————————————————---------------
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Google Translate Example</title>
<style>
#google_translate_element {
display: none;
}
.translate-button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
border: none;
margin-right: 10px;
cursor: pointer;
}
.translate-button:hover {
background-color: #0062cc;
}
</style>
</head>
<body>
<div>
<button class="translate-button" onclick="translateToEnglish()">Translate to English</button>
<button class="translate-button" onclick="translateToHindi()">Translate to हिंदी</button>
</div>
<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>
<script>
function translateToEnglish() {
var select = document.querySelector(".goog-te-combo");
select.value = "en";
select.dispatchEvent(new Event('change'));
}
function translateToHindi() {
var select = document.querySelector(".goog-te-combo");
select.value = "hi";
select.dispatchEvent(new Event('change'));
}
</script>
</body>
</html>
-—-——————————————————————————————————————----------
If you want add the button in post page then, copy the code
1. Open the post page where you want to add .
Inbetween<p> and</p> and update it.
Remember some important points
- "You have to add the code before adding the content to it."
- "In this code, I have only provided buttons for two specific languages, through which you can switch between them."
- "I have provided buttons for only two languages - Hindi and English. You can change them by replacing the Hindi and English text in the code with the text of the language you want."
If you want to translate the Homepage or the whole page you have to add it as a widget to your blog's sidebar or footer by going to the "Layout" section in your Blogger dashboard and adding a new HTML/JavaScript gadget. Simply copy and paste the Google Translate widget code into the gadget and save.
3. Click on HTML/Javascript
4. Name a title to the gadget like “Translate”.
Paste the html code on the content section and save it.
5. Here is the result.
For other websites, you can add the Google Translate widget by adding the JavaScript code to the HTML code of your website. You can also use CodePen to create custom Google Translate widgets using JavaScript and CSS.
Overall, adding the Google Translate widget to your website or blog is a great way to make your content accessible to a wider audience who may speak different languages.
