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.

Last word

In this post we will provided information about How to Add a Google Translate Button in Your Blogger Website, If you enjoy this post, kindly share it with your friends. For any queries, feel free to join our Telegram channel, where we share exclusive and informative content. Many valuable tips are exclusively available on our Telegram channel. Stay updated with your favorite source, DK Technozone.

Dhanjee Rider

Dk Technozone An Editor,Programmer, grafix Designer Website Designer,Android Geek, Instagram Filter Seller,Blloger, Seo Expert, Wordpress Geek etc. Telegram