 |
| How to add google translate to blogger |
How to add google translate to blogger
some time ago I tried to install a translation widget on this blog, the Google Translate Widget works to translate blog articles into other languages. So that blog visitors who come from various countries can read articles on the blog without the need to copy and paste the article into the translator page.
actually every browser already provides translations, such as google chorme we just need to click the three dots at the top right and select translate, or if through the desktop we just need to right click on the mouse and select translate.
then maybe you ask why I put it on this blog, the answer is quite simple, because not everyone understands the internet and maybe there are still people who don't realize that the browser has provided a translator.
This google translate widget has actually been provided on blogger layout , maybe none of you have realized it yet, you just need to go into layout and add the widget and later there will be a translation option, but I don't recommend this method because it will burden the blog loading.
the name of a 3rd party widget is not light, because it uses external js, at first glance it looks short but inside it has a very, very long code, and usually there is still external css and js like this google translate widget.
but here I have tricked it so that the translate widget does not burden the blog loading, here I have hosted this google translate script on github and used lazyload to delay loading the script, until there is a new scroll activity this script will load. for the demo, you can feel for yourself the load speed of this blog, ok so if you want to try it please see the method below.
how to add google translate to blogger
please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>
This css function is to hide the original appearance of this widget which I think is less attractive and the Google logo is too conspicuous, so I changed it to a svg icon to make it simpler.
#google_translate_element{padding:0;margin-right:5px;margin-top:15px}
.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:%2308102b;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:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%2308102b;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:%2308102b;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:%2308102b;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:%2308102b;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:%2308102b;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:%2308102b;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}
/* css darkmode sesuaikan classnya jika berbeda atau hapus bagian ini */
.dark-mode .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:%23d2d0d0;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:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;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;}
if the position does not match your template, please set the css that I have marked above.
margin-right:5px the bigger the value, the more the icon will go to the left.
margin-top:15px the bigger the value, the lower the icon will be.
%2308102b icon color , must use %23 as # sign
then please copy the code below and place it under the header or where you want to display the translate icon.
<div id='google_translate_element'></div>and finally put the javascript below just above the code </body> or <!--</body>--></body>
<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://rawcdn.githack.com/IRFANSHAHMARWAT/blogger-store-safelink/b68ef85242fab2da49567b4f38a125ff2eb5735a/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:'id',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
</script>The part I marked is the language code that you want to display, you can delete it if you don't think you need that language. pageLanguage section :'idplease adjust the language code of your blog. if you don't forget to click save
Alternative Icon
below I provide 3 additional icons if you think the icon above doesn't match your blog
<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,5H10.88L10,2H4A2,2 0 0,0 2,4V17A2,2 0 0,0 4,19H11L12,22H20A2,2 0 0,0 22,20V7A2,2 0 0,0 20,5M7.17,14.59A4.09,4.09 0 0,1 3.08,10.5A4.09,4.09 0 0,1 7.17,6.41C8.21,6.41 9.16,6.78 9.91,7.5L10,7.54L8.75,8.72L8.69,8.67C8.4,8.4 7.91,8.08 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,12.05 9.29,11.46H7.08V9.91H11.03L11.04,10C11.08,10.19 11.09,10.38 11.09,10.59C11.09,12.94 9.5,14.59 7.17,14.59M13.2,12.88C13.53,13.5 13.94,14.06 14.39,14.58L13.85,15.11L13.2,12.88M13.97,12.12H13L12.67,11.08H16.66C16.66,11.08 16.32,12.39 15.1,13.82C14.58,13.2 14.21,12.59 13.97,12.12M21,20A1,1 0 0,1 20,21H13L15,19L14.19,16.23L15.11,15.31L17.79,18L18.5,17.27L15.81,14.59C16.71,13.56 17.41,12.34 17.73,11.08H19V10.04H15.36V9H14.32V10.04H12.36L11.18,6H20A1,1 0 0,1 21,7V20Z' fill='%2308102b'/></svg><svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M21.35,11.1H12.18V13.83H18.69C18.36,17.64 15.19,19.27 12.19,19.27C8.36,19.27 5,16.25 5,12C5,7.9 8.2,4.73 12.2,4.73C15.29,4.73 17.1,6.7 17.1,6.7L19,4.72C19,4.72 16.56,2 12.1,2C6.42,2 2.03,6.8 2.03,12C2.03,17.05 6.16,22 12.25,22C17.6,22 21.5,18.33 21.5,12.91C21.5,11.76 21.35,11.1 21.35,11.1V11.1Z' fill='%2308102b'/></svg><svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M17.9,17.39C17.64,16.59 16.89,16 16,16H15V13A1,1 0 0,0 14,12H8V10H10A1,1 0 0,0 11,9V7H13A2,2 0 0,0 15,5V4.59C17.93,5.77 20,8.64 20,12C20,14.08 19.2,15.97 17.9,17.39M11,19.93C7.05,19.44 4,16.08 4,12C4,11.38 4.08,10.78 4.21,10.21L9,15V16A2,2 0 0,0 11,18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' fill='%2308102b'/></svg>Language Code List
Code Language
| Code | Language |
|---|---|
| id | Indonesia |
| js | Jawa |
| su | Sunda |
| en | English |
| vi | Vietnam |
| zh-CN | China (Aks. Sederhana) |
| zh-TW | China (Aks. Tradisional) |
| th | Thailand |
| ru | Rusia |
| ms | Melayu |
| ko | Korea |
| ja | Jepang |
| it | Italia |
| hi | Hindi |
| fr | Prancis |
| es | Spanyol |
| de | Jerman |
| ar | Arab |
| ps | Pashto |
| pt | Portugis |
| hmn | Hmong |
| hr | Kroat |
| ht | Kreol Haiti |
| hu | Magyar |
| yi | Yiddi |
| hy | Armenia |
| yo | Yoruba |
| ig | Igbo |
| af | Afrikans |
| is | Islan |
| am | Amhara |
| iw | Ibrani |
| az | Azerbaijan |
| zu | Zulu |
| ro | Rumania |
| ceb | Cebuano |
| be | Belarussia |
| bg | Bulgaria |
| rw | Kinyarwanda |
| bn | Bengali |
| bs | Bosnia |
| sd | Sindhi |
| ka | Georgia |
| si | Sinhala |
| sk | Slovakia |
| sl | Slovenia |
| sm | Samoa |
| sn | Shona |
| so | Somali |
| sq | Albania |
| ca | Katala |
| sr | Serb |
| kk | Kazak |
| st | Sesotho |
| km | Khmer |
| sv | Swensk |
| sw | Swahili |
| ku | Kurdi |
| co | Korsika |
| ta | Tamil |
| ky | Kirghiz |
| cs | Ceko |
| te | Telugu |
| tg | Tajik |
| la | Latin |
| lb | Luksemburg |
| cy | Wales |
| tk | Turkmen |
| tl | Tagalog |
| da | Denmark |
| tt | Tatar |
| lt | Lituania |
| lv | Latvia |
| ug | Uyghur |
| uk | Ukraina |
| mg | Malagasi |
| mi | Maori |
| ur | Urdu |
| mk | Makedonia |
| haw | Hawaii |
| ml | Malayalam |
| mn | Mongol |
| mr | Marathi |
| uz | Uzbek |
| mt | Malta |
| el | Yunani |
| eo | Esperanto |
| my | Burma |
| et | Estonia |
| eu | Basque |
| ne | Nepal |
| fa | Farsi |
| nl | Belanda |
| no | Norsk |
| fi | Finlandia |
| ny | Chichewa |
| fy | Frisia |
| ga | Gaelig |
| gd | Gaelik Skotlandia |
| gl | Galisia |
| xh | Xhosa |
| pa | Punjabi |
| ha | Hausa |
| pl | Polandia |
| ps | Pashto |
| pt | Portugis |
| ht | Kreol Haiti |
| is | Islan |
| lo | Laos |
| or | Odia (Oriya) |
| gu | Gujarati |
| tr | Turki |
Media-ui, iMAG and Fletro Template User Only
please go to blogger > themes > edit html copy the css below and place it above the code ]]></b:skin>
body{top:0!important}
.goog-te-gadget-simple:after{content:'';position:relative;height:100%;width:50px;padding:10px;z-index:2;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:%2308102b;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:%2308102b;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%2308102b;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:%2308102b;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:%2308102b;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:%2308102b;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:%2308102b;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:%2308102b;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;background-size:20px 20px}
.drK .goog-te-gadget-simple:after{content:'';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:%23d2d0d0;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:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/><line data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;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:%23d2d0d0;stroke-linecap:round;stroke-linejoin:round'/></g></g></svg>") center / 12px no-repeat;background-size:20px 20px}
.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;border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border-radius:4px}continue to use ctrl+ fsearch for the code as below
<!--[ Profile button ]-->
<label class='tPrfl tIc bIc' expr:aria-label='data:item' for='offPrf'><b:include name='profile-icon'/></label>
</li>
</b:if>if you find it, put this code just below the code </b:if>
<div class='tIc bIc' id='google_translate_element'/>and finally put the javascript below just above the code <!--</body>--></body>
<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/[email protected]/translate2.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
/*]]>*/
</script>
<script>
function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'id',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
</script>How to add google translate to blogger ok so here we have succeeded in installing a lightweight google translation widget on the blog, hopefully it will be useful.
Thanks for reading: How to add google translate to blogger, Sorry, my English is bad:)
