How to Fix Google Translate in Plus UI Theme?

As we start to customize Blogger templates, we sometimes encounter issues that seem tricky but are actually quite simple to fix. One such problem we recently faced is with the Google Translate widget in the Plus UI theme. It’s no secret that Plus UI is one of the most popular Blogger themes for its modern design and customizable features. So in this Blogger Tutorial, we will Fix Google Translate in Plus UI Theme.

However, like any other blogger themes, small issues can still exist. In this post, Bytes Vibe will guide on how we fixed this plus ui translate button not working issue on our site. We will make sure that Google Translate button functions smoothly with the Plus UI blogger theme.

How to Setup Google Translate in Plus Ui?

Google translate button is an inbuilt feature of Plus Ui blogger theme. We can find this button at the top of our theme. But in some Plus Ui themes, this button doesn’t work. Since we want to make our site SEO friendly, it’s important that our theme is fully optimized for users from different regions. Let’s see how to Fix Google Translate in Plus UI Theme and make sure the translation tool works perfectly.

How to Fix Google Translate in Plus UI Theme?

Okay now if we want to Fix Google Translate in Plus UI Theme than we need to follow these steps below:

Step 1: Add Custom CSS in Plus Ui Blogger theme

To solve the plus ui translate button not working problem we need to add some css in our blogger plus ui theme. To add css in plus ui theme –

1. Log in to Blogger Dashboard.
2. Go to Theme section and select Edit Html from drop-down menu.
3. Now search for /*]]>*/</style> and paste the css codes for plus ui translate button above this code. We will normally find /*]]>*/</style> in 439 line in Blogger Plus Ui theme.

/* Google Translate CSS Shared By Bytes Vibe*/
.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)}Code language: CSS (css)

/* 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)}Code language: CSS (css)

So after adding these two css in our plus ui theme we need to save our changes.

Step 2: Add Custom JavaScripts in Plus Ui

Now that we have added css in plus ui theme. But to Fix Google Translate in Plus UI Theme we need to add JavaScript so that this translation widget can work. To add custom JavaScript in plus ui theme, we need to –

• Again Log in Blogger Dashboard.
• Go to theme like before and select Edit Html.
• Now we need to search /* YOUR CUSTOM JS */ in our blogger theme. Note that – we will find two of these. We need to paste our own JavaScript below the 2nd one to Fix Google Translate in Plus UI Theme. We will find YOUR CUSTOM JS at line number 4800 in Blogger plus ui theme.

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('|')));Code language: JavaScript (javascript)

Step 3: Add Html file to Fix Google Translate in Plus UI Theme

Finally we need to add html code to make our plus ui translation widget to work. Follow these steps to add html in plus ui theme –

• Again log in to Blogger Dashboard and go to theme section.
• Now we need to search for Google Translate button. We will normally find in 1732 number line in plus ui blogger theme.
• Now we need to delete or replace all the code within li tags with our own codes.
• Now delete or replace everything from line number 1731 to 1734 or <li class='gTrans hidden'> to </li> with our own Html code. Watch the video for better understanding. Replace those codes with this 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>Code language: HTML, XML (xml)

Now save all the changes in Plus Ui blogger template. Now if we check in our theme than we will see that our plus ui translate button is working just fine.

By following these simple steps, we can Fix Google Translate in Plus UI Theme without breaking the layout or causing compatibility issues. This solution not only improves user experience but also contributes to better SEO by making our content accessible to a wider audience.

Conclusion

Fixing the Google Translate issue in the Plus UI theme requires a few tweaks. But the result is a fully functional, user-friendly translator widget that enhances the user experience for multilingual visitors. For more Blogger theme tips and tricks, stay tuned to Bytes Vibe!