How to Add a Google Translate Button in Your Blogger Website
Dhanjee Rider
How to Add a Google Translate Button in Your Blogger Website
Welcome to our comprehensive guide on how to seamlessly integrate a Google Translate button into your Blogger website.
In this article, we'll walk you through the process of adding translate button for website step by step, ensuring that your Blogger website becomes even more user-friendly and welcoming to visitors from around the world.
Understanding the Importance of Multilingual Websites
Before we delve into the technical aspects, let's briefly discuss why having a multilingual website matters. A diverse online audience seeks information in their native languages, and providing translations can lead to higher engagement, longer time spent on your site, and increased conversions. This makes it imperative for website owners to consider implementing tools like the Google Translate button to break down language barriers.
Step-by-Step Guide to Adding the Google Translate Button
- Login to your blogger account
- Go to THEME and then EDIT HTML
- Find the appropriate location to add translate button by inspect
- Iff you are not able to inspect you can put this button html above your first close header tag</header>
<div id='google_translate_element'></div>
- Now go to bottom site of THEME and add this code above your close body tag </body>
<style>#google_translate_element{padding:0;}
body{top:0!important}
font{background:transparent!important;box-shadow:none!important}
.goog-te-gadget-simple img,.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span,#goog-gt-tt,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}
iframe.skiptranslate{border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border:none;box-shadow:none}
.goog-te-gadget-simple{background-color:transparent!important;background:url("https://upload.wikimedia.org/wikipedia/commons/d/d7/Google_Translate_logo.svg") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;display:inline-block;font-weight:400;line-height: 1.8;padding:0 6px;text-align:center;white-space:nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius: 4px}
.dark-mode .goog-te-gadget-simple{background-color:transparent!important;background:url("https://upload.wikimedia.org/wikipedia/commons/d/d7/Google_Translate_logo.svg") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;}</style>
<script>/*<![CDATA[*/
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
},
'google_translate_element'
)
};
function translateOnload(){var script = document.createElement('script');script.async = true;script.src = 'https://cdn.wendycode.com/blogger/widget/google-translate-free.js?cb=googleTranslateElementInit';document.body.appendChild(script);}function wcTjLzy(){translateOnload();localStorage.setItem("wcGoogleTj","true");}var wcTjStrg = localStorage.getItem("wcGoogleTj");if ("true" != wcTjStrg){var t_wcTj = false;var e_wcTj = false;window.addEventListener("scroll",() =>{if ((document.documentElement.scrollTop != 0 && !t_wcTj) || (document.body.scrollTop != 0 && !t_wcTj)){wcTjLzy();t_wcTj = true;e_wcTj = true;}},true);window.addEventListener("click",() =>{if (!e_wcTj && !e_wcTj){wcTjLzy();e_wcTj = true;t_wcTj = true;}},true);}if ("true" === wcTjStrg){translateOnload();}
/*]]>*/
</script>
- Now you can change you favourite language code iff you want to add more or less
- Congratulations you have successfully added translate button in your blogger website
Conclusion
In conclusion, adding a Google Translate button to your Blogger website is a proactive step toward reaching a broader audience and fostering an inclusive online community. The process is user-friendly and doesn't require any coding expertise. By following our step-by-step guide, you'll empower your website to transcend language barriers and connect with visitors from around the world.
