How to Add a Google Translate Button in Your Blogger Website

 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.

translate button for website


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.

Next Post Previous Post
No Comment
Add Comment
comment url