How to Add New Style Google Translate Widget to Blogger with Lazy Load

Before adding Google Translate to our website we need to know why it is important for website!

Google Translate is used on websites to translate material across languages. Website developers and owners use Google Translate for several reasons:

Worldwide Audience: Website visitors speak different languages. Websites may reach a wider audience by incorporating Google Translate, making their information accessible to non-native speakers.

Translation improves user experience. User engagement and site retention are higher when material is available in their chosen language. It makes the website more accessible.

Sites may reach more people by translating information into several languages. Businesses trying to grow internationally may find this useful.

Offering translations ensures that material is culturally appropriate and readily comprehended by individuals from diverse languages and cultures. Misunderstandings are reduced.

SEO benefits: Multilingual material may boost SEO. It may boost the website's search engine rankings by making it more visible to multilingual visitors.

Some locations or sectors need websites to offer material in various languages due to rules or accessibility requirements. Combining translation services meets these needs.

While designing a multilingual website from scratch might be resource-intensive, adding Google Translate provides basic translation capabilities quickly and cheaply.

Google Translate is popular, although it may struggle with complicated or nuanced text. In specific situations, websites may use specialist translation services for accuracy.

We know about the importance of Google Translate, now we will see how to add it to the website.

We will add Google Translate to our website in three steps.

That is what is most important to us. We will add this google translation to the site, go to the website dashboard and write the HTML edit of the theme.

Go to blogger dashbord > Theme > Edit HTML. Then Copy the following codes and ]]></b:skin> Paste this code above

#google_translate_element{padding:0;margin-right:5px;margin-top:15px}
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("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='&lt;Group&gt;' id='_Group_'><path d='M3 5H15M9 3V5M10.0482 14.5C8.52083 12.9178 7.28073 11.0565 6.41187 9M12.5 18H19.5M11 21L16 11L21 21M12.7511 5C11.7831 10.7702 8.06969 15.6095 3 18.129' fill='none' stroke-width='1.5' stroke='%2308102b'/></g></g></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:10px;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}

Then copy the following code: and replace the place where you want to see this Google Translate.

<div id='google_translate_element'></div>

Finally, copy the below Javascript and paste it above the Closing body tag </body>.

<script>/*<![CDATA[*/
//oleh www.wendycode.com
//terakhir diperbarui 22-07-2023
function googleTranslateElementInit() {
    new google.translate.TranslateElement({
            pageLanguage: 'en',
            includedLanguages: 'en,id,bn,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>

Then save your theme and see your works

Successfully installed Google translate with lazy load!

Reference

https://www.wendycode.com/2021/01/cara-memasang-widget-google-terjemahan-yang-ringan-di-blog.html