How to Add Google Translate Widgets to The Latest Median UI Template 2021
Kaconk.eu.org – Google Translate widgets become very important for a blog if visitors come from many countries. The existence of this widget will certainly make it easier for visitors to understand the articles we write.
HOW TO INSTALL TRANSLATE WIDGETS
1. Open Blogger Dashboard
2. Click the Theme menu
3. Press the Inverted Triangle icon
4. Select Edit HTML
5. Find the code ]]></b:skin> to be quick, press Ctrl + F
6. Copy Google Translate CSS code Kaconk.eu.org
/* Google Translate Kaconk.eu.org*/
#google_translate_element{padding:0;margin-right:3px;margin-top:auto}
.goog-te-banner-frame.skiptranslate,.goog-te-gadget-simple img,img.goog-te-gadget-icon,.goog-te-menu-value span{display:none!important}
.goog-te-menu-frame{box-shadow:none!important}
.goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='<Group>' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='<Path>' id='_Path_6' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%2348525c;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;display:inline-block;font-weight:400;line-height: 1.8;padding:0 6px;text-align:center;white-space:nowrap;vertical-align: middle;-ms-touch-action: manipulation;touch-action:manipulation;cursor:pointer;-webkit-user-select: none;-moz-user-select:none;-ms-user-select:none;user-select:none;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius: 4px}
body{top:0px!important}.darkMode .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g data-name='Google Translate' id='Google_Translate'><g data-name='<Group>' id='_Group_'><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' data-name='<Path>' id='_Path_' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:none;stroke-linecap:round;stroke-linejoin:round' transform='translate(1.0000, 1.4000)'/><path d='M12,4.5H22A1.5,1.5,0,0,1,23.5,6V22A1.5,1.5,0,0,1,22,23.5H13.5l-1.5-4' data-name='<Path>' id='_Path_2' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/><line data-name='<Path>' id='_Path_4' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/><line data-name='<Path>' id='_Path_5' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round' x1='17.5' x2='17.5' y1='9.5' y2='10.5'/><path d='M20,10.5c0,1.1-1.77,4.42-4,6' data-name='<Path>' id='_Path_6' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/><path d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;}8. Then find the code </body>
9. Copy Google Translate Javascript code
<!--[ Javascript Google Translate ]-->
<script>/*<![CDATA[*/ var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/choipanwendy/translategoogle@main/translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0); /*]]>*/</script>
<script> function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en_us',includedLanguages:'id,en,ar,ja,ko,hi',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});</script>page language: means the language of the article we create (if your blog is in Indonesian, the en_us code should not be changed)
Included language: means the translator's destination language (to add another language, type comma, and then code. Example of initial code: id,en,ar,ja,ko,hi then we want to add Afrikaans language, so: id,en,ar,ja,ko,hi,af
Language Code That Can Be Added To included language
af [Afrikaans]
ar-dz [Arabic - Algeria]
ar-ly [Arabic - Libya]
ar-dz [Arabic - Algeria]
ar-ly [Arabic - Libya]
ar-ma [Arabic - Morocco]
ar-sa [Arabic - Saudi Arabia]
ar-tn [Arabic - Tunisia]
bo [Tibetan]
de-at [German - Austria]
de-ch [German - Switzerland]
en-au [English - Australia]
en-ca [English - Canada]
en-gb [English - Great Britain]
en-ie [English - Ireland]
en-nz [English - New Zealand]
en-us [English - United States]
es-do [Spanish - Dominican Republic]
es [Spanish]
fo [Faroese]
fr-ca [French - Canada]
fr-ch [French - Switzerland]
fr [French]
gd [Gaelic]
mk [Maori]
ms-my [Malay - Malaysia]
ms [Malay]
my [Burmese]
nb [Norwegian]
nl-be [Dutch - Belgium]
nl [Dutch]
pa-in [Punjabii]
pt-br [Portuguese - Brazil]
sd [Sindhi]
sr-cyrl [Serbian - Cyrillic]
th [Thai]
ttl-phh
uz-latn
zh-hk [Chinese - Hong Kong]
ar-sa [Arabic - Saudi Arabia]
ar-tn [Arabic - Tunisia]
bo [Tibetan]
de-at [German - Austria]
de-ch [German - Switzerland]
en-au [English - Australia]
en-ca [English - Canada]
en-gb [English - Great Britain]
en-ie [English - Ireland]
en-nz [English - New Zealand]
en-us [English - United States]
es-do [Spanish - Dominican Republic]
es [Spanish]
fo [Faroese]
fr-ca [French - Canada]
fr-ch [French - Switzerland]
fr [French]
gd [Gaelic]
mk [Maori]
ms-my [Malay - Malaysia]
ms [Malay]
my [Burmese]
nb [Norwegian]
nl-be [Dutch - Belgium]
nl [Dutch]
pa-in [Punjabii]
pt-br [Portuguese - Brazil]
sd [Sindhi]
sr-cyrl [Serbian - Cyrillic]
th [Thai]
ttl-phh
uz-latn
zh-hk [Chinese - Hong Kong]
10. Put Google Translate Javascript code on top </body>
12. After you meet, copy the HTML Translate Button code, then place it on top of the <!-- [Dark mode button]-->
<!--[ Translate Button ]-->
<div id='google_translate_element'/>
13. Save Template
RESULT
ADVANTAGES OF THIS TRANSLATE WIDGET
1. Fast
Do not interfere with the speed of the blog, because new widgets will appear after visitors scroll the page.
2. Minimalist
It looks simple, small, but it still looks like this is a translate button because it uses the Google Translate icon.
3. Customize the Language
We can add and subtract the language we want.
4. Userfriendly
Visitors from outside do not need to use other tools to understand the content of our blog.
5. Auto Translate
Once the visitor chooses the desired language, the language will continue to be active even if he visits other pages on our blog. So that visitors do not need to intercept the translation many times which will only make them tired.
LACK OF TRANSLATE WIDGETS
Although there are many advantages of this widget, keep in mind that this widget can reduce the best practice score in Measure (web.dev). If initially, our Best Practice score is 100, it will change to 93 after installing this widget.