We've been grappling with a persistent issue in the Plus UI of our Blogger theme due to Google Translate for the past few months. But worry not! Today, I'm excited to unveil the ultimate solution to this long-standing problem. In this guide, I'll walk you through the step-by-step process to resolve the Google Translate-related complications affecting the Plus UI in your Blogger theme.
This journey will empower you to understand the root cause of these challenges and equip you with the definitive fix. Say goodbye to the frustrations of dealing with malfunctioning Plus UI elements and embrace a smoother, more optimized blogging experience.
So, let's dive in and discover the comprehensive solution that will put an end to your Plus UI woes in the Blogger theme impacted by Google Translate!
Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.
Remember, while technology can present challenges, it also offers innovative solutions. Armed with the knowledge gained here, you now possess the tools to navigate and resolve similar issues that may arise in your Blogger journey.
This journey will empower you to understand the root cause of these challenges and equip you with the definitive fix. Say goodbye to the frustrations of dealing with malfunctioning Plus UI elements and embrace a smoother, more optimized blogging experience.
So, let's dive in and discover the comprehensive solution that will put an end to your Plus UI woes in the Blogger theme impacted by Google Translate!
Add Translate Select Language Box
Adding the Google Translate select language box option on Blogger won't require any advanced coding skills or much knowledge about HTML, CSS or JavaScript because I've already designed it for you. let's get started!Step 1: First of all Login to your Blogger Dashboard.
Step 2: On Blogger Dashboard, click Theme.
Step 3: Click the arrow down icon next to 'customize' button.
Step 4: Click Edit HTML, you will be redirected to editing page.
Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it.
/* Google Translate */
.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:1px solid #aaa;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-radius:4px;cursor:pointer}.googleTrans .goog-te-gadget select.goog-te-combo:focus{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.googleTrans .goog-te-gadget select.goog-te-combo>*{background:var(--contentB)}.drK .googleTrans .goog-te-gadget select.goog-te-combo{border:1px solid 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)}
Step 6:Now add the following JavaScript just below the /* YOUR CUSTOM JS */ tag.
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 7: Now find <!--[ Google Translate button ]--> in your Header section ) ( Plus UI V2.6.1)
<li class='isTrans hidden'> <label expr:aria-label='data:item' class='tTrans tIc bIc' for='offTrans' onclick='vibRate(50)'><b:include name='translate-icon'/><span id='google_translate_element'/></label> <input class='transI hidden' id='offTrans' type='checkbox'/> <div class='transW'> <div class='transH' data-text='Translate'> <label class='transCl' for='offTrans'></label> </div> <div class='transP'> <div class='googleTrans hidden' id='_google_translator_element'></div> </div> </div> <label class='fCls' for='offTrans'></label> </li>Step 8: Now find <!--[ Google Translate button ]--> in your Header section ) ( Plus UI V2.6.2)
<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 9: Then Save
Conclusion
In conclusion, the journey to fix the Plus UI in your Blogger theme affected by Google Translate has been an exploration of creative problem-solving. By dissecting the issue and harnessing the capabilities of Google Translate, we've uncovered a reliable solution to tackle this persistent obstacle.Remember, while technology can present challenges, it also offers innovative solutions. Armed with the knowledge gained here, you now possess the tools to navigate and resolve similar issues that may arise in your Blogger journey.
Tags:
Blogger tricks