Join our Telegram group to get instant answers to all your questions, stay updated with the latest posts, and receive regular updates: Join Now!.

How To Add Google Translate Button In Blogger

Discover the process of incorporating a Google Translate widget into the navigation menu of your Blogger website. How To Add Google Translate Button.

Learn how to integrate a Google Translate widget seamlessly into your Blogger website. Easily incorporate a Translate widget into the sidebar by leveraging the default widgets provided by Blogger.

How To Add Google Translate Button In Blogger

Enhance the aesthetics and customization of your Blogger website by placing a Google Translate button strategically in your header navigation menu. This approach allows for a more visually appealing integration, offering the flexibility to include specific languages directly within the button for a tailored multilingual experience.

Additionally, it employs lazy loading, ensuring that speed-related concerns are effectively mitigated.

Wondering about the advantages of incorporating the Translate button? Imagine catering to a global audience and empowering your visitors with a seamless one-click translation option. This feature allows readers to effortlessly translate the page into their native language, contributing to an enhanced user experience. By providing this convenience, you not only decrease bounce rates but also make strides in improving your website's SEO performance.

For users employing a different theme, it becomes necessary to examine the header menu, specifically searching for icons such as those representing dark mode or the search function. Subsequently, insert the provided HTML code either before or after the identified icon to seamlessly integrate the Google Translate button.

<div id='google_translate_element'/>

Locate the </body> tag in your code and smoothly incorporate the following CSS and Javascript just above it.

<style>
 #google_translate_element{padding:0;margin-right:5px} .goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img,img.goog-te-gadget-icon,.goog-te-menu-value span{display:none!important} .goog-te-menu-frame{box-shadow:none!important} .goog-te-gadget-simple{background-color:transparent!important;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cg style=&#39;fill:none;stroke:%2308102b;stroke-linecap:round;stroke-linejoin:round&#39;%3E%3Cpath d=&#39;M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z&#39; /%3E%3Cpath d=&#39;M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4&#39; /%3E%3Cline x1=&#39;17&#39; x2=&#39;13.5&#39; y1=&#39;19.5&#39; y2=&#39;23.5&#39; /%3E%3Cline x1=&#39;14.5&#39; x2=&#39;21.5&#39; y1=&#39;10.5&#39; y2=&#39;10.5&#39; /%3E%3Cline x1=&#39;17.5&#39; x2=&#39;17.5&#39; y1=&#39;9.5&#39; y2=&#39;10.5&#39; /%3E%3Cpath d=&#39;M20,10.5c0,1.1-1.77,4.42-4,6&#39; /%3E%3Cpath d=&#39;M16,13c.54,1.33,4,4.5,4,4.5&#39; /%3E%3Cpath d=&#39;M10.1,7.46a4,4,0,1,0,1.4,3h-4&#39; /%3E%3C/g%3E%3C/svg%3E&quot;) center / 12px no-repeat;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} body{top:0px!important} .darkMode .goog-te-gadget-simple{background-color:transparent!important;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cg style=&#39;fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round&#39;%3E%3Cpath d=&#39;M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z&#39; /%3E%3Cpath d=&#39;M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4&#39; /%3E%3Cline x1=&#39;17&#39; x2=&#39;13.5&#39; y1=&#39;19.5&#39; y2=&#39;23.5&#39; /%3E%3Cline x1=&#39;14.5&#39; x2=&#39;21.5&#39; y1=&#39;10.5&#39; y2=&#39;10.5&#39; /%3E%3Cline x1=&#39;17.5&#39; x2=&#39;17.5&#39; y1=&#39;9.5&#39; y2=&#39;10.5&#39; /%3E%3Cpath d=&#39;M20,10.5c0,1.1-1.77,4.42-4,6&#39; /%3E%3Cpath d=&#39;M16,13c.54,1.33,4,4.5,4,4.5&#39; /%3E%3Cpath d=&#39;M10.1,7.46a4,4,0,1,0,1.4,3h-4&#39; /%3E%3C/g%3E%3C/svg%3E&quot;) center / 12px no-repeat;background-size: 20px 20px} .headerIcon .gtWgt.gtHide{display:none} .headerIcon .gtWgt .gtIcon{position:absolute;background-color:var(--header-bg)} .darkMode .headerIcon .gtWgt .gtIcon{background-color:var(--dark-bg)} .postComments.gtHide .gtWgt{display:none} .postComments.gtHide .shrBtn{margin-right:0} .postComments .gtWgt .gtLoad{position:relative} .postComments .gtWgt .gtIcon{position:absolute;background-color:var(--body-bg)} .postComments .gtWgt #google_translate_element{margin-right:0} .darkMode .postComments .gtWgt .gtIcon{background-color:var(--dark-bg)} .postComments .gtWgt .gtIcon .goog-te-gadget-simple{background-color:transparent!important;background-size: 18px 18px} .postComments .gtWgt .gtIcon .goog-te-gadget-simple{background-color:transparent!important;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cg style=&#39;fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round&#39;%3E%3Cpath d=&#39;M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z&#39; /%3E%3Cpath d=&#39;M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4&#39; /%3E%3Cline x1=&#39;17&#39; x2=&#39;13.5&#39; y1=&#39;19.5&#39; y2=&#39;23.5&#39; /%3E%3Cline x1=&#39;14.5&#39; x2=&#39;21.5&#39; y1=&#39;10.5&#39; y2=&#39;10.5&#39; /%3E%3Cline x1=&#39;17.5&#39; x2=&#39;17.5&#39; y1=&#39;9.5&#39; y2=&#39;10.5&#39; /%3E%3Cpath d=&#39;M20,10.5c0,1.1-1.77,4.42-4,6&#39; /%3E%3Cpath d=&#39;M16,13c.54,1.33,4,4.5,4,4.5&#39; /%3E%3Cpath d=&#39;M10.1,7.46a4,4,0,1,0,1.4,3h-4&#39; /%3E%3C/g%3E%3C/svg%3E&quot;) center / 12px no-repeat;background-size: 18px 18px} .darkMode .postComments .gtWgt .gtIcon .goog-te-gadget-simple{background-color:transparent!important;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cg style=&#39;fill:none;stroke:%23d1d1d1;stroke-linecap:round;stroke-linejoin:round&#39;%3E%3Cpath d=&#39;M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z&#39; /%3E%3Cpath d=&#39;M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4&#39; /%3E%3Cline x1=&#39;17&#39; x2=&#39;13.5&#39; y1=&#39;19.5&#39; y2=&#39;23.5&#39; /%3E%3Cline x1=&#39;14.5&#39; x2=&#39;21.5&#39; y1=&#39;10.5&#39; y2=&#39;10.5&#39; /%3E%3Cline x1=&#39;17.5&#39; x2=&#39;17.5&#39; y1=&#39;9.5&#39; y2=&#39;10.5&#39; /%3E%3Cpath d=&#39;M20,10.5c0,1.1-1.77,4.42-4,6&#39; /%3E%3Cpath d=&#39;M16,13c.54,1.33,4,4.5,4,4.5&#39; /%3E%3Cpath d=&#39;M10.1,7.46a4,4,0,1,0,1.4,3h-4&#39; /%3E%3C/g%3E%3C/svg%3E&quot;) center / 12px no-repeat;background-size: 18px 18px}.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span {text-decoration: none;display: none;}</style>
<script>/*<![CDATA[*/ var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0); /*]]>*/</script>
<script>/*<![CDATA[*/ function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en',includedLanguages:'en,hi,gu,bn,ta,te,mr,ne,ml',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}; /*]]>*/</script>

After making these modifications, save your theme, and take a moment to review your website. Ensure that the changes have been successfully implemented and are functioning as intended.

Feel free to customize the language options within this widget by modifying the HTML language codes. Add or remove languages according to your preferences to tailor the widget to your specific linguistic needs.

Language (Region) Code
Arabic (U.A.E.) ar-ae
Arabic (Bahrain) ar-bh
Arabic (Egypt) ar-eg
Chinese (Hong Kong) zh-hk
Chinese (Taiwan) zh-tw
Dutch (Standard) nl
English en
English (Australia) en-au
English (Canada) en-ca
English (United Kingdom) en-gb
English (United States) en-us
English (South Africa) en-za
French (Standard) fr
French (Canada) fr-ca
German (Standard) de
Hindi hi
Indonesian id
Italian (Standard) it
Italian (Switzerland) it-ch
Japanese ja
Korean ko
Malayalam ml
Malaysian ms
Punjabi pa
Polish pl
Portuguese (Portugal) pt
Russian ru
Ukrainian ua
Urdu ur

Conclusion

Explore the comprehensive list of HTML Language codes available for reference. I trust that you've seamlessly integrated the Google Translate button into your Blogger navigation menu. Should you encounter any uncertainties, feel free to reach out through our social media channels or engage in discussions within our Telegram Group.

Versatile Professional | Blogger, Web Developer, & Trader | Bridging Content Creation, Tech Innovation, & Financial Markets

You may like these posts

Post a Comment

Enter Image URL / Code Snippets / Quotes / name tag, then click parse button accordingly that you have entered. then copy the parse result and paste it into the comment field.


Cookie Consent

We use cookies on our website to analyze traffic, enhance your browsing experience, and remember your preferences. By continuing to use our site, you consent to our use of cookies. You can manage your cookie preferences in your browser settings. For more information, please read our Privacy Policy.

Google Translate
Bookmark Post