How to Fix Google Translate in Plus UI Theme

Hello! Welcome to EmadulAi.

Plus UI Theme is a fantastic Blogger theme that many of us love. As we start to customize this Blogger template, 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 show you how to fix Google Translate in Plus UI Theme.

How to Fix Google Translate in Plus UI Theme?

However, like any other Blogger themes, small issues can still exist. In this post, EmadulAi will guide you on how we fixed this Plus UI Translate button not working issue on our site. We will make sure that the Google Translate button functions smoothly in the Plus UI Blogger theme.

How to Setup Google Translate in Plus UI?

The Google Translate button is an inbuilt feature of the Plus UI Blogger theme. You can usually find this button at the top of your theme. However, in some Plus UI themes, this button may not work properly.

Since we want to make our site SEO-friendly, it’s important that our theme is fully optimized for users from different regions. In this guide, we will show you how to fix Google Translate in Plus UI Theme and ensure that the translation tool works perfectly for all visitors.

How to Fix Google Translate in Plus UI Theme?

Now, if we want to fix Google Translate in Plus UI Theme, we need to follow the steps below:

For convenience, I have added line numbers of the code where we need to insert the custom codes.

Step 1: Add Custom CSS in Plus UI Blogger Theme

To fix the Plus UI Translate button not working issue, we need to add some CSS in the Blogger Plus UI theme. Follow these steps to add CSS:

1. Log in to your Blogger Dashboard.
2. Go to the Theme section and select Edit HTML from the drop-down menu.
3. Search for /*]]>*/ or </style> and paste the CSS codes for the Plus UI Translate button above this line. Normally, /*]]>*/ is found around line 439 in the Blogger Plus UI theme.

/* Google Translate CSS Shared By EmadulAi*/
.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 By EmadulAi */
.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)}

After adding these CSS codes to your Plus UI theme, make sure to save your changes to apply the fix.

4. Add Custom JavaScript in Plus UI

Now that we have added CSS to the Plus UI theme, we need to add some JavaScript to make the Google Translate widget work properly. Follow these steps to add custom JavaScript:

Search for /* YOUR CUSTOM JS */ in your Blogger theme where you can add the custom JavaScript code.

<script type="text/javascript">
eval(function(p,a,c,k,e,d){while(c--){if(k,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('|')));
</script>

Note: We will find **two `YOUR CUSTOM JS`** placeholders in Plus UI theme. To fix Google Translate, you need to paste the JavaScript code **below the 2nd one**. In most Plus UI themes, this 2nd placeholder is found around **line 4800** in Blogger HTML editor.

5. Add HTML to Fix Google Translate in Plus UI Theme

Finally, we need to add HTML code to make the Plus UI Translate widget work properly. Follow these steps: Search for the Google Translate button in your theme. You will normally find it around line 1732 in the Plus UI Blogger theme.

Delete or replace all the code within the <li> tags with your own custom code. Specifically, delete or replace everything from line 1731 to 1734, or from <li class='gTrans hidden'> to </li>, with the HTML code provided below.

Watch the tutorial video for better understanding. Replace those lines with the HTML code provided 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>

Now, save all the changes in your Plus UI Blogger template. Once done, check your theme and you will see that the Plus UI Translate button is working perfectly.

By following these simple steps, you 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 your content accessible to a wider audience.

6. How to Add More Languages in Plus UI Translator Widget?

If you want to add more languages in the Plus UI Translate widget, follow these steps:

1. Search for gTranslate or includedLangs code in your Plus UI Blogger theme.
2. You will find something similar to this code:

   gTranslate: { pageLang: "en", includedLangs: "en,hi,gu,bn,ta,te,mr,ne,id", autoDisplay: "true", multiLangPage: "true" }

3. Now, you can add or remove language codes in the includedLangs section as per your requirement.

Conclusion! That’s all about adding the Fix Google Translate in Plus UI Theme in your Blogger posts. We hope you found this guide helpful and easy to follow. Please feel free to share this article with others. If you face any issues or have any questions regarding any step, don’t hesitate to ask in the comment section. Thank you for reading!