Hello Everyone, on this occasion I will share how to add google translate widget in blogger. In fact every browser already provides a translation, like google chorme we just need to click on the three dots in the top right and select translate, or if via desktop we just need to right click the mouse Required and translation needs to be selected. There are still some people who do not know that the browser has provided a translator.
This Google Translate widget is actually made available on Blogger Layout. You just need to go into the layout and add the widget and later there will be a translation option, but I do not recommend this method as it will burden the blog loading.
The third party widget is not lightweight, as it uses external JS, at first glance it looks small but has a very, very long code inside, and usually external CSS and JavaScript.
But here I have outsmarted it so that translation widget is not burdened on blog loading, here I have hosted this google translate script on github and use lazy load to delay script loading, as soon as there is a new scroll activity , this script will be loaded. Read the full post if you want to install this Google Translate widget on your Blogger website.
What is Google Translate :-
There is a multilingual machine created by Google known as Google Translate. Google Translate is used to translate text, documents and websites from one language to another. Google Translate provides a variety of website interfaces, a mobile app for Android and iOS, and an application programming interface, which helps developers create software, Android applications, iOS applications, and browser extensions. Google Translate supports a total of 109 languages in the world. In 2016, Google claimed over 500 million users, while it grew to 100 billion as of 01 August 2021.
Advantages of Google Translate :-
The task of translating any blog article into other languages can be done with the help of the Google Translate widget. With its help, blog visitors from different countries can easily read articles in their own language by clicking on the translator and selecting their language.
Disadvantages of Google Translate :-
This Google Translate widget uses a lot of JavaScript, which can slow down the loading speed of your blog. It uses external JS, at first glance it looks small, but inside it is a very, very long code and a lot of external CSS and JavaScript.
How To Add Google Translate Widget in Blogger :-
#google_translate_element{padding:0;margin-right:5px;margin-top:15px}
.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%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23161617'/%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}If your template has dark mode feature, and if you want a different color in dark mode, please add the CSS below.
.dark-mode .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%3Cpath d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;}
<div id='google_translate_element'></div>Note :- Copy the code above and place it where you want this translation icon to appear.
<script type='text/javascript'>
//<![CDATA[
/* New Smart Tech Mukesh Google Translate Widget By Www.SmartTechMukesh.Com */
function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en',includedLanguages:'en,hi,or,gu,pa,ne,mr,ur,te,ta,bn,vi,id',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
/* Lazyload Google Translate By Www.SmartTechMukesh.Com */
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="https://cdn.jsdelivr.net/gh/smarttechmukesh/scripts@main/google-translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
//]]>
</script>Note :- The part I marked is the language code you want to display, you can remove it if you don't think you need that language. pageLanguage:'en' Please adjust your Blog Language code.
Following is The Language Code You Can Use.
| Code | Language |
|---|---|
| id | Indonesia |
| jw | Jawa |
| su | Sunda |
| en | English |
| vi | Vietnam |
| zh-CN | China (Aks. Sederhana) |
| zh-TW | China (Aks. Tradisional) |
| th | Thailand |
| ru | Rusia |
| ms | Melayu |
| ko | Korea |
| ja | Jepang |
| it | Italia |
| hi | Hindi |
| fr | Prancis |
| es | Spanyol |
| de | Jerman |
| ar | Arab |
| ps | Pashto |
| pt | Portugis |
| hmn | Hmong |
| hr | Kroat |
| ht | Kreol Haiti |
| hu | Magyar |
| yi | Yiddi |
| hy | Armenia |
| yo | Yoruba |
| ig | Igbo |
| af | Afrikans |
| is | Islan |
| am | Amhara |
| iw | Ibrani |
| az | Azerbaijan |
| zu | Zulu |
| ro | Rumania |
| ceb | Cebuano |
| be | Belarussia |
| bg | Bulgaria |
| rw | Kinyarwanda |
| bn | Bengali |
| bs | Bosnia |
| sd | Sindhi |
| ka | Georgia |
| si | Sinhala |
| sk | Slovakia |
| sl | Slovenia |
| sm | Samoa |
| sn | Shona |
| so | Somali |
| sq | Albania |
| ca | Katala |
| sr | Serb |
| kk | Kazak |
| st | Sesotho |
| km | Khmer |
| sv | Swensk |
| sw | Swahili |
| ku | Kurdi |
| co | Korsika |
| ta | Tamil |
| ky | Kirghiz |
| cs | Ceko |
| te | Telugu |
| tg | Tajik |
| la | Latin |
| lb | Luksemburg |
| cy | Wales |
| tk | Turkmen |
| tl | Tagalog |
| da | Denmark |
| tt | Tatar |
| lt | Lituania |
| lv | Latvia |
| ug | Uyghur |
| uk | Ukraina |
| mg | Malagasi |
| mi | Maori |
| ur | Urdu |
| mk | Makedonia |
| haw | Hawaii |
| ml | Malayalam |
| mn | Mongol |
| mr | Marathi |
| uz | Uzbek |
| mt | Malta |
| el | Yunani |
| eo | Esperanto |
| my | Burma |
| et | Estonia |
| eu | Basque |
| ne | Nepal |
| fa | Farsi |
| nl | Belanda |
| no | Norsk |
| fi | Finlandia |
| ny | Chichewa |
| fy | Frisia |
| ga | Gaelig |
| gd | Gaelik Skotlandia |
| gl | Galisia |
| xh | Xhosa |
| pa | Punjabi |
| ha | Hausa |
| pl | Polandia |
| ps | Pashto |
| pt | Portugis |
| ht | Kreol Haiti |
| is | Islan |
| lo | Laos |
| or | Odia (Oriya) |
| gu | Gujarati |
| tr | Turki |
Conclusion :-
The only drawback of installing this Google Translate Widget is that your blog will load a bit slow. Because JavaScript has been used in it.
In this post I have explained How To Add Google Translate Widget in Blogger. I Hope this tutorial can be useful for you. Thank You for Visiting Our Website.
Refrence :
Www.SmartTechMukesh.Com