Home
Blogger

Google Translate with icon changeable (Lazy load) for Blogger

2


Hello everyone, Welcome to Shiva Technic World, Before few months I shared a tutorial on Google translate that Google translated with the custom icons but the icon applied is on CSS for many users that also shows an error when they try to change the icon on CSS, So in this article, I came with a solution for that, this time you did not want to do any changes in CSS you can easily change the icon in HTML format itself and like old translate tutorial here also we used on scroll lazy load JS here, So don't worry about affecting the speed of your website cause of lazy load it did not affect your website speed, So without wasting much time let's check how to add Google Translate with icon changeable in Blogger.

How to add Google Translate with Icon changeable?

  • First, go to your Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
  • Then find ]]></b:skin> and paste the following CSS just above it or you can paste it above <head/> tag by adding <style></style>
/* Google Translate */ body{top:0px!important}.goog-te-banner-frame.skiptranslate, .goog-te-gadget-simple img, img.goog-te-gadget-icon, .goog-te-menu-value span, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-logo-link, .goog-te-balloon-frame{display:none!important} .goog-text-highlight{background-color: transparent !important;box-shadow:none !important;-webkit-box-shadow:none !important} .goog-te-menu-frame{box-shadow:none!important} .goog-te-gadget-simple{background-color:transparent!important;border:none!important;outline:0 !important;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none !important;-moz-user-select:none !important;-ms-user-select:none !important;user-select:none !important} #google_translate_element{position:absolute !important;z-index:2 !important;overflow:hidden !important} #google_translate_element, .skiptranslate.goog-te-gadget, .goog-te-gadget-simple{width:40px !important;height:40px !important;padding:0 !important;margin:0 !important;border-radius:50% !important}.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;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:4px}
  • Then paste the following code anywhere that you want to show Google Translate
    • <!--[ Google Translate]-->
    <label aria-label='Translate' role='button'>
    <!--[ SVG Icon ]-->
    <svg class='line' viewBox='0 0 24 24'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z'/><path 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'/><line x1='17' x2='13.5' y1='19.5' y2='23.5'/><line class='svg-c' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line class='svg-c' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path class='svg-c' d='M20,10.5c0,1.1-1.77,4.42-4,6'/><path class='svg-c' d='M16,13c.54,1.33,4,4.5,4,4.5'/><path class='svg-c' d='M10.1,7.46a4,4,0,1,0,1.4,3h-4'/></svg>
    <!--[ SVG Icon End ]-->
    <span id='google_translate_element'/>
    </label>

    You can change the highlighted SVG code in the code box with your SVG Icon code!

  • Then find </body> and paste the following JS above it
    • <script>/*<![CDATA[*/ var lazyts=!1;var gTrans=document.getElementById('gTrans');window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.lazy&&!1===scrollTop)&&(!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);if(gTrans!=null){gTrans.classList.remove('gtHide')}}(),lazyts=!0)},!0); /*]]>*/</script>
    <script> function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:&#39;en&#39;,includedLanguages:&#39;en,bn,hi,gu,bn,ta,te,mr,ne,ml,kn,ar,id&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}; </script>

    You can change the highlighted language codes with you like the language code that your visitors need!

  • Then Save the HTML

    • Video tutorial

    Youtube video

    Conclusion

    Hope Google Translate with icon changeable (Lazy load) for Blogger article is useful to you, If you have any doubts related to this article ask me in the comment, Do share with your friends if you have any doubts related to this article or facing any issue then tell me in the comment, Thanks for visiting, Have a nice day!