How to Fix Google Translate in Plus UI Blogger Template
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:
- Incorrect Integration: The Google Translate script might not be correctly integrated into the template.
- Outdated Code: The Google Translate API or the implementation code might be outdated.
Guide to Fix Google Translate in Plus UI Template
- Login to Blogger dashboard then go to Themes.
- Click on the icon next to the Customize button.
- Now search for the code
/b:skinand paste the following codes above it:/* Google Translate CSS */ .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)} .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)} - Again type Your Custom JS and search. You will see
/* YOUR CUSTOM JS */inside 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="\">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('|'))); - 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> - Click the icon to save the changes.
How to Add More Language to Translator
Open the Blogger template editor and search for the gTranslate or includedLangs code. 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"
}Now just add or remove the language code from here. Finally, save the change. That's it!
List of Language Codes
| Code | Language |
|---|---|
| af | Afrikans |
| am | Amhara |
| ar | Arab |
| az | Azerbaijan |
| be | Belarussia |
| bg | Bulgaria |
| bn | Bengali |
| bs | Bosnia |
| ca | Katala |
| ceb | Cebuano |
| co | Korsika |
| cs | Ceko |
| cy | Wales |
| da | Denmark |
| de | Jerman |
| el | Yunani |
| en | English |
| eo | Esperanto |
| es | Spanyol |
| et | Estonia |
| eu | Basque |
| fa | Farsi |
| fi | Finlandia |
| fr | Prancis |
| fy | Frisia |
| ga | Gaelig |
| gd | Gaelik Skotlandia |
| gl | Galisia |
| gu | Gujarati |
| ha | Hausa |
| haw | Hawaii |
| hi | Hindi |
| hmn | Hmong |
| hr | Kroat |
| ht | Kreol Haiti |
| hu | Magyar |
| hy | Armenia |
| id | Indonesia |
| ig | Igbo |
| is | Islan |
| it | Italia |
| iw | Ibrani |
| ja | Jepang |
| js | Jawa |
| ka | Georgia |
| kk | Kazak |
| km | Khmer |
| ko | Korea |
| ku | Kurdi |
| ky | Kirghiz |
| la | Latin |
| lb | Luksemburg |
| lo | Laos |
| lt | Lituania |
| lv | Latvia |
| mg | Malagasi |
| mi | Maori |
| mk | Makedonia |
| ml | Malayalam |
| mn | Mongol |
| mr | Marathi |
| ms | Melayu |
| mt | Malta |
| my | Burma |
| ne | Nepal |
| nl | Belanda |
| no | Norsk |
| ny | Chichewa |
| or | Odia (Oriya) |
| pa | Panjabi |
| pl | Polandia |
| ps | Pashto |
| pt | Portugis |
| ro | Rumania |
| ru | Rusia |
| rw | Kinyarwanda |
| sd | Sindhi |
| si | Sinhala |
| sk | Slovakia |
| sl | Slovenia |
| sm | Samoa |
| sn | Shona |
| so | Somali |
| sq | Albania |
| sr | Serb |
| st | Sesotho |
| su | Sunda |
| sv | Swensk |
| sw | Swahili |
| ta | Tamil |
| te | Telugu |
| tg | Tajik |
| th | Thailand |
| tk | Turkmen |
| tl | Tagalog |
| tr | Turki |
| tt | Tatar |
| ug | Uyghur |
| uk | Ukraina |
| ur | Urdu |
| uz | Uzbek |
| vi | Vietnam |
| xh | Xhosa |
| yi | Yiddi |
| yo | Yoruba |
| zh-CN | China (Aks. Sederhana) |
| zh-TW | China (Aks. Tradisional) |
| zu | Zulu |
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!