How to Add Google Translate Widget to Blogger Website
Hello Guys, Welcome to Accomodatio. Today's article is about 'How to Add Google Translate Widget in Blogger'. 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 a translation, 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 we need to put it on the 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, 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.
How To Install Google Translate Widget?
Step 1. Search for the code ]]></b:skin> on your theme and paste the following CSS Codes just above it.
/* Google Translate Widget CSS Codes */
#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,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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='%23161617'/%3E%3C/svg%3E") 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}
If the position of widget does not match with 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
If your template has a dark mode feature, and if you want a different color when in dark mode, please add the CSS below. Each template can have a different dark mode class, so please adjust it, you can just adjust the part that I marked.
/* Dark Mode CSS */
.darkMode .goog-te-gadget-simple{background-color:transparent!important;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath 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='%23fff'/%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;}
Information : - To change the widget icon just change the part I marked like M20.5H10.
- To change the icon size edit the part I marked like 20px 20px
- To change the icon color change the %23161617. Here %23 is a # sign so don't delete it.
Some Other Icons
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
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
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
Step 2. Now add the following HTML Codes where you want to add Google Translate Widget.
<div id='google_translate_element'></div>
Step 3. Now add the following JavaScript just above to </body> tag. If you don't find it it is probably already parsed which is <!--</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/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:'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 like en,id, vi etc. are the language code you want to display, you can delete it if you feel you don't need that language. And the part like pageLanguage:'id, is the language code of your blog, adjust it according to your blog language.
The following are the language codes that you can use.
Code | Language |
---|---|
id | Indonesia |
jw | 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 |
This is all about adding the Google Translate Widget to Blogger. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.
Reference:
Wendy Code
Post a Comment