| 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 |
|---|---|
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