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>
//<![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.

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

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

Shares:

9 Comments

  • Mr. Sup
    September 4, 2021 at 8:56 am

    How to make Highlight code with copy code to clipboard? please make tutorial

    Reply
  • Badsha
    October 8, 2021 at 4:20 pm

    Nice ! first of all I want to say you thank. But I have a issue. Suppose I want to read your article in hindi and I change the language but when I try to read the article in English, there is no option. Please can you solve it for me. Thanks you again

    Reply
  • Admin
    October 8, 2021 at 4:22 pm

    First of all this is hidden copy translate. So closed you've got used browser again visit website.

    Reply
  • Badsha
    October 11, 2021 at 8:52 am

    I have tried but where is the English language option.
    https://ibb.co/cgMHq3b

    Reply
  • Admin
    October 11, 2021 at 8:54 am

    The language of our blog is English, due to which you have not been given the option of English.

    Reply
  • Badsha
    October 12, 2021 at 11:15 am

    Thanks ,my problem is solved.

    Reply
  • Badsha
    November 8, 2021 at 11:19 am

    Hello Mukesh,Actually I have noticed that the anchor tag (<a>) doesn't work on this template. Why and how to solve this? Thanks

    Reply
  • Badsha
    November 14, 2021 at 11:43 am

    Please Reply!

    Reply
  • LovedIt
    September 15, 2022 at 12:59 pm

Leave a Reply

Your email address will not be published. Required fields are marked *