How To Add Google Translate Widget in Blogger ?

How To Add Google Translate Widget in Blogger

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

Step 1 :- First Go To Blogger.Com.
Step 2 :- Then Login Your Blogger Account.
Step 3 :- Then Click on Theme Menu.
Step 4 :- After Click on Edit Html.
Step 5 :- Then Copy Css Below and Place Above Code ]]></b:skin>.
#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;}
Step 6 :-Then Copy The Code Below and Place it Under The </header>.
<div id='google_translate_element'></div>

Note :- Copy the code above and place it where you want this translation icon to appear.

Step 7 :- Then Copy The Below JavaScript And Put This Code Above </body>.
<script type='text/javascript'>
//<![CDATA[
/* New Smart Tech Mukesh Google Translate Widget By Www.SmartTechMukesh.Online */
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.Online */
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/[email protected]/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.

Step 8 :- Then Don't Forget to Click on Save Theme.

Following is The Language Code You Can Use.

CodeLanguage
idIndonesia
jwJawa
suSunda
enEnglish
viVietnam
zh-CNChina (Aks. Sederhana)
zh-TWChina (Aks. Tradisional)
thThailand
ruRusia
msMelayu
koKorea
jaJepang
itItalia
hiHindi
frPrancis
esSpanyol
deJerman
arArab
psPashto
ptPortugis
hmnHmong
hrKroat
htKreol Haiti
huMagyar
yiYiddi
hyArmenia
yoYoruba
igIgbo
afAfrikans
isIslan
amAmhara
iwIbrani
azAzerbaijan
zuZulu
roRumania
cebCebuano
beBelarussia
bgBulgaria
rwKinyarwanda
bnBengali
bsBosnia
sdSindhi
kaGeorgia
siSinhala
skSlovakia
slSlovenia
smSamoa
snShona
soSomali
sqAlbania
caKatala
srSerb
kkKazak
stSesotho
kmKhmer
svSwensk
swSwahili
kuKurdi
coKorsika
taTamil
kyKirghiz
csCeko
teTelugu
tgTajik
laLatin
lbLuksemburg
cyWales
tkTurkmen
tlTagalog
daDenmark
ttTatar
ltLituania
lvLatvia
ugUyghur
ukUkraina
mgMalagasi
miMaori
urUrdu
mkMakedonia
hawHawaii
mlMalayalam
mnMongol
mrMarathi
uzUzbek
mtMalta
elYunani
eoEsperanto
myBurma
etEstonia
euBasque
neNepal
faFarsi
nlBelanda
noNorsk
fiFinlandia
nyChichewa
fyFrisia
gaGaelig
gdGaelik Skotlandia
glGalisia
xhXhosa
paPunjabi
haHausa
plPolandia
psPashto
ptPortugis
htKreol Haiti
isIslan
loLaos
orOdia (Oriya)
guGujarati
trTurki

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

Read Also :