Buy Plus UI v2.6! Demo Buy Now!

How to add Google Translate Widget on Your Blogger Template | Tech Aadi

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
How to add Google Translate Widget on Your Blogger Template | Tech Aadi
Hello Guys, How are you. I hope you are doing great. Welcome to Tech Aadi. So Today's article is about 'How to Add Google Translate Widget on your Blogger Template'. 

So below are some benefits of adding Google Translate Widget for you Blog:-

  • Article's can be translated to any language added on the blog preference.
  • Visitors from other countries can also read your article without any hesitation.
  • The widget is only for Posts but you can show it in the homepage also and it will not effect the speed of your blog homepage.
  • And there are many more benefits.

Did you know that some of the browser already provides a translation widget, for example in Google Chrome you can click on the three dots at the right side at the top and can select the translation widget, and if you are using desktop Hover the mouse to the translation tab. 

Now you must have a question❓ in your mind that why you need the translate widget if it's already available. The answer is everybody doesn't understand the things and can't use the widget and sometime Google Chrome also fails to show the translate widget. So that's why you will need it.

Did you know that blogger also provide Google Translate Widget. To activate this you just need to go to the layout and select add a new widget and add translate widget. But we don't recommend this due to it will slow down your website loading speed.

How To Install Google Translate Widget?

Step 1. Search for the code </style> or ]]></b:skin> on your theme and paste the below CSS Codes just above it.

/* Google Translate Widget CSS Codes */ 
#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("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='fill:none;stroke:%23262d3d;stroke-linecap:round;stroke-linejoin:round'%3E%3Cpath d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' /%3E%3Cpath d='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' /%3E%3Cline x1='17' x2='13.5' y1='19.5' y2='23.5' /%3E%3Cline x1='14.5' x2='21.5' y1='10.5' y2='10.5' /%3E%3Cline x1='17.5' x2='17.5' y1='9.5' y2='10.5' /%3E%3Cpath d='M20,10.5c0,1.1-1.77,4.42-4,6' /%3E%3Cpath d='M16,13c.54,1.33,4,4.5,4,4.5' /%3E%3Cpath d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' /%3E%3C/g%3E%3C/svg%3E") 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} body{top:0px!important} /* Dark Mode Google Widget CSS */ .darkMode .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'%3E%3Cpath d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' /%3E%3Cpath d='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' /%3E%3Cline x1='17' x2='13.5' y1='19.5' y2='23.5' /%3E%3Cline x1='14.5' x2='21.5' y1='10.5' y2='10.5' /%3E%3Cline x1='17.5' x2='17.5' y1='9.5' y2='10.5' /%3E%3Cpath d='M20,10.5c0,1.1-1.77,4.42-4,6' /%3E%3Cpath d='M16,13c.54,1.33,4,4.5,4,4.5' /%3E%3Cpath d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' /%3E%3C/g%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px}

Step 2. Now add the following HTML Codes where you want to add Google Translate Widget.

<b:if cond='data:view.isPost'>
<!--[ Google Translate Button ]-->
<div id='google_translate_element'/>
</b:if>

I recommend to add this HTML on upper right corner of your blog.

Remove the <b:if cond='data:view.isPost'> code if you want to show the Google Translate Widget in homepage also.

Step 3. Now add the following JavaScript just above to </body> tag. Or if you can't find search for <!--</body>--></body> this code.

<b:if cond='data:view.isPost'>
<!--[ Google Translate Widget Script ]-->
        <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,bn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$('.hover').mouseleave(function (){$(this).removeClass('hover')}); /*]]>*/</script>
</b:if>

Make sure to remove the <b:if cond='data:view.isPost'> condition tag from here also if you want to show the widget on homepage also.

The part I marked like en,hi,bn etc. are the language code you want to display, you can delete it if you feel you don't need that language. And the part like pageLanguage:en, is the language code of your blog, adjust it according to your blog language.

Below are some popular language codes that you can use.

Language Code Language
id
Indonesian
bn
Bengali
hi
Hindi
ru
Russian
de
German
ko
Korean
it
Italian
ar
Arabic
zh-TW
China (Aks. Tradisional)

More Codes...

Conclusion:

So in this article we have discussed about how to add Google Translate Widget on your blogger template. So if you have any questions or if there is error having implementing this code. Comment below given form or make sure to contact us.

Reference :
Nexozed

Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

1 comment

  1. BEST BLOGGER THEMES ,SCRIPTS , TUTORIAL AND EARNING TRICKS AND IDEAS ON ONE AND ONLY BLOG:-
    Anand Nawal
Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.