Discover the Benefits of Canva Pro for Free and Elevate Your Designs | Get it for Free

Translate Select Language Box

Since I previously built the Google Translate select language box option for you, adding it to Blogger won't require any sophisticated coding abilities or extensive understanding of HTML, CSS, or JavaScript. Now let's get going!

Warning!
Before we start adding the XML code, I recommend that you create a backup of your current theme. If a problem arises, you can always restore it later.

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 Widget by abdullahdcurz*/
.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)}

/* 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 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 in <!--[ Google Translate button ]--> your Header section

<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  

Go to Link

Go to Link