How to Fix Google Translate in Plus UI Blogger Template

 The Plus UI template is a popular choice for many website developers due to its sleek design and user-friendly interface. However, some users have reported issues with the Google Translate feature not working properly when clicking the translate icon. If you’re experiencing this problem, you’re in the right place. In this guide, we’ll walk you through the steps to fix Google Translate in your Plus UI template, ensuring that your website can be easily translated into multiple languages.

Fix Google Translate in Plus UI

Why is Google Translate Not Working in Plus UI Template?

Before we dive into the fix, it’s important to understand why Google Translate might not be working in your Plus UI template. The most common reasons include:

  1. Incorrect Integration: The Google Translate script might not be correctly integrated into the template.
  2. Outdated Code: The Google Translate API or the implementation code might be outdated.

Video Tutorial Related to This Topic

If you don’t feel like reading, then instead of reading you can watch the video below that is related to this topic.

Guide to Fix Google Translate in Plus UI Template

Step 1: Login to Blogger dashboard then go to Themes.

Step 2: Click on the icon next to the Customize button.

Step 3: Now search for the code /b:skin and paste the following codes above it.

/* Google Translate CSS By Sakil Ansary*/
.googleTrans #goog-gt-tt,.googleTrans .goog-logo-link,.googleTrans .goog-te-balloon-frame,.googleTrans .goog-te-gadget img,.googleTrans .goog-te-gadget>span,.googleTrans .goog-te-menu-value span,.googleTrans .goog-tooltip,.googleTrans .goog-tooltip:hover,.googleTrans .google-logo-link .googleTrans .goog-te-banner-frame.skiptranslate,.googleTrans img.goog-te-gadget-icon,body>.skiptranslate{display:none!important}
.googleTrans .goog-te-gadget{display:block!important;width:initial!important;height:initial!important;font-size:0;line-height:0}
.googleTrans .goog-te-gadget select.goog-te-combo{--border-color:var(--linkB);outline:0;margin:0;width:100%;height:40px;color:var(--bodyC);background-color:transparent;text-align:left;font-size:14px;font-family:var(--fontB)!important;line-height:1.25;padding:8px 16px;border-width:1px;border-color:var(--border-color);border-radius:4px;cursor:pointer;--t-prop:border-color,top,padding,margin,-webkit-transform,-webkit-box-shadow;--t-dura:0.15s;--t-func:cubic-bezier(.4,0,.2,1);-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-transition-property:var(--t-prop);-o-transition-property:var(--t-prop);transition-property:var(--t-prop);-webkit-transition-duration:var(--t-dura);-o-transition-duration:var(--t-dura);transition-duration:var(--t-dura);-webkit-transition-timing-function:var(--t-func);-o-transition-timing-function:var(--t-func);transition-timing-function:var(--t-func)}
.googleTrans .goog-te-gadget select.goog-te-combo:focus{box-shadow:inset 0 0 0 1px var(--border-color);border-color:var(--border-color)}
.googleTrans .goog-te-gadget select.goog-te-combo>*{background:var(--contentB)}
.drK .googleTrans .goog-te-gadget select.goog-te-combo{--border-color:var(--darkU);color:var(--darkT)}
.drK .googleTrans .goog-te-gadget select.goog-te-combo>*{background:var(--darkB)}
/* Google Translate CSS */
.transW{visibility:hidden;opacity:0;position:fixed;right:20px;left:20px;bottom:0;display:block;transition:var(--trans-1);-webkit-transition:var(--trans-1);z-index:21;background:var(--contentB);border-radius:10px;box-shadow:0 5px 30px 0 rgba(0,0,0,.05)}
.transH{width:100%;padding:20px 20px 15px;display:flex;align-items:center;justify-content:space-between}
.transH::before{content:attr(data-text);font-size:13px;opacity:.8}
.transCl::after{content:'\2715';font-size:14px}
.transP{width:100%;padding:0 20px 20px}
.transI:checked~.transW{visibility:visible;opacity:1;bottom:20px}
.transI:checked~.transW+.fCls{background:rgba(0,0,0,.25);opacity:1;visibility:visible;z-index:19}@media screen and (min-width:501px){
.transW{position:absolute;width:280px;top:-5px;bottom:auto;right:0;left:auto;border-radius:15px 5px 15px 15px}
.transI:checked~.transW{top:0;right:0;bottom:auto}
.transI:checked~.transW+.fCls{background:0 0}}
.drK .transW{background:var(--darkBs)}

Step 4: Again type Your Custom JS and search. You will see /* YOUR CUSTOM JS */ in side the code. paste the following code below it

eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c+'\\b','g'),k[c])}}return p}('(16(){20 24=22;16 26(13){20 14=22;21 107[14(78)].79[14(80)](13)[14(81)](/(?:^\\[82\\25(.*?)\\]$)/,"$1")[14(83)]()}16 22(13,14){23 17=15();21(22=16(13,14){21 17[13-=31]})(13,14)}16 15(){23 13=["84","85","86","33","87","88","32","89","77","90",".92","41","93","94","95","//39.27.75/97/98.49?99=38","100","38","101","102","28","103","104","91","76","39","53","52.50-51-59","37","55","56","45","61","63","<47 64=\'65\'>69 70 74 62 ","60","73","72","71","68"];21(15=16(){21 13})()}!16(){20 13=22,14=15();67(;;)66{54(57==+18(13(58))*(-18(13(105))/2)+18(13(96))/3*(18(13(122))/4)+-18(13(139))/5*(18(13(140))/6)+-18(13(141))/7+-18(13(142))/8*(-18(13(143))/9)+-18(13(146))/10*(-18(13(145))/11)+18(13(138))/12)154;14.28(14.35())}149(13){14.28(14.35())}}(),150[24(152)]=16(){20 15=24,19=29.147(15(148)),13=36[15(153)].151,14=("144"==26(13)?13:"40"===26(13)?13.41()[15(137)](","):[]).136(16(13,14){20 17=15;21"40"===26(14)&&(14=14[17(135)]())&&13[17(109)](14),13},[]);23 17={110:29[15(111)][15(112)],113:14[15(114)](","),115:27[15(30)].32[15(116)][15(117)]};118 27[15(30)][15(31)](17,19.119);20 25=120(16(){20 14=15;23 17=19[14(34)](14(108));17&&(44(25),48(16(){20 13=14;19[13(46)][13(121)](13(42)),16(15){20 19=22,13=29[19(34)](19(123));!1!==36.37.124&&15[19(125)]("126",16(){20 13=19;23 14=15[13(127)],17=15[13(128)][0];14&&17&&129(13(130)+17.131+"")}),13&&13[19(46)].45(19(42))}(17)},43))},43);48(16(){44(25)},132)},133.49(24(134))}).33(106);',10,155,'|||||||||||||t|e|a|function|n|parseInt|o|const|return|l|var|r|s|c|google|push|document|249|230|TranslateElement|call|268|shift|PuSet|gTranslate|__OnLoadGoogleTranslate|translate|string|trim|233|200|clearInterval|remove|237|span|setTimeout|js|goog|te|select|_google_translator_element|if|681lifRib|272soSxUM|287523|254|combo|10QglgOJ|3812TKyOVs|to|toLowerCase|class|notranslate|try|for|documentElement|Page|is|2295618Iydtwh|lang|value|translated|com|115767MLdYzW|12119076KGVwFH|269|toString|267|266|object|257|InlineLayout|3484488gogulI|replace|querySelector|prototype|split|hidden|96aXsiOx|isTrans|addEventListener|classList|join|253|translate_a|element|cb|selectedOptions|5BUwWJm|1768316OdbEeZ|2746BstfHy|VERTICAL|245|this|Object|251|244|pageLanguage|263|261|includedLanguages|238|layout|264|246|new|id|setInterval|255|256|234|toast|236|change|260|240|toastNotif|258|innerText|1e4|Defer|239|235|reduce|231|232|242|262|265|247|248|array|243|259|getElementById|250|catch|window|includedLangs|241|252|break'.split('|')));

Step 5: Finally, type Google Translate button and then replace the code with the code below.

<li class='isTrans hidden'> 
  <!--[ Google Translate button ]--> 
  <label aria-label='Translate' class='tIc bIc' for='offTrans' onclick='vibRate(50)'><b:include name='translate-icon'/></label> 
    <input class='transI hidden' id='offTrans' type='checkbox'/> 
      <div class='transW'> 
        <div class='transH' data-text='Translate'> 
          <label class='transCl' for='offTrans'/> 
            </div> 
          <div class='transP'> 
        <div class='googleTrans hidden' id='_google_translator_element'/> 
      </div> 
    </div> 
  <label class='fCls' for='offTrans'/> 
</li>

Step 6: Click the icon to save the changes.

How to Add More Language to Translator

  1. Open the Blogger template editor and search for the gTranslate or includedLangs code.
  2. You will see a piece of code like below.
    gTranslate: {
        pageLang: "en",
        includedLangs: "en,hi,gu,bn,ta,te,mr,ne,id",
        autoDisplay: "true",
        multiLangPage: "true"
      }
  3. Now just add or remove the language code from here.
  4. Finally, save the change. That's it!

List of language codes is provided below:

Code Language
id Indonesia
js 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

Fixing the Google Translate feature in the Plus UI template is a straightforward process if you follow these steps. By verifying the script integration, checking for JavaScript conflicts, updating the API, ensuring the correct HTML structure, and testing on different browsers, you can ensure that your website is accessible to a global audience. If you continue to experience issues, consider reaching out to the Plus UI template support team for further assistance.

Remember, a well-functioning translation feature can significantly enhance user experience and broaden your audience reach. Happy coding!

Next Post Previous Post
No Comment
Add Comment
comment url