What is Google Translate?
You may have already used this translate or translator service of Google. Through this translate feature, we can easily translate or translate any language to another language. Since it is not new, and almost everyone knows, so let's not talk about it much.
What is Google Translate Widget?
Google Translate is a product of Google. With which we can easily convert any language to another language. By using the Google Translate widget on our website, the visitors of our website from other countries can easily convert and read the articles or content of our website in their own language.
How to add google translate widget to blogger?
Blogger is a blogging platform. In other words, it can be called CMS or Content Management System. Which most bloggers use at the beginning of their blogging career. Because we don't have to spend any kind of money to blog with blogger. Many people are already earning good amount by blogging. Some are working with blogger's free blogspot subdomain with AdSense approval.
Blogger is a free platform. Blogging can be started by having a google account. Anyone can get success without spending any money for blogging. A blogger who is new to blogging with blogger can work with blogger's subdomain for adsense approval. Can continue blogging about.
To increase the income from our website, we need a lot of traffic or visitors. Visitors are the life of the website. Because, without visitors, the real purpose of creating a website will be disrupted. And if we add the feature of translating our content or articles to all languages in our blog. , but visitors from other countries will benefit. By doing this, if the content is Bengali, visitors from other countries can easily convert and read the articles in their language.
If you follow the procedure shown below, you can add a Google Translate widget to your blog in the right way. By doing this, you will get a higher page speed than the default Google Translate widget in Blogger. Another feature of this widget is that we use the Header icon. I will install next to them.
To view the demo:Click here ।
How to Install Google Translate Widget on Blogger Blog?
- First go to your blogger dashboard. Then go to Themes and click on Edit HTML from the drop-down menu, you will be redirected inside the theme.
- Now search inside the theme ]]></b:skin> and paste below CSS code above this ]]></b:skin> .(Use Hackers Keyboard to search with mobile.) Below CSS code Added a little svg google translate widget. It looks very nice. You will understand after adding it to the blog.
#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}
/* darkmode css adjust the class if different or delete this part */
.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;}
OPTIONAL: In the CSS codes above, margin-right:5px and margin-top:15px can be changed according to the theme of your blog. And you can change the color by changing %2308102b. But here %23 is the parsed form of #. This % The rest of the numbers except 23 can be changed according to the color code.
- Now paste the following icon codes below the header or anywhere you want. I recommend to paste it next to the dark mode, search, profile button of your theme.
<div id='google_translate_element'></div>
- Finally, paste the following JavaScript code above the </body> tag.
<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/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>In the javascript code above you will see the words en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn. These are language code . You can keep the languages you want to keep and delete the rest.
Language code listing
I have given a table below, here you will find almost all the language codes .
| Code | Language |
|---|---|
| id | Indonesia |
| js | Java |
| are | Sunda |
| in | English |
| vi | Vietnam |
| zh-CN | Chinese (Simplified) |
| zh-TW | Chinese (Traditional Aks.) |
| th | Thailand |
| ru | Russia |
| ms | Malay |
| is | Korea |
| and | Japan |
| it | Italia |
| hi | Hindi |
| fr | French |
| es | Spanish |
| of | German |
| ar | Arab |
| ps | Pashto |
| pt | Portuguese |
| hmm | Hmong |
| hr | Croat |
| ht | Haitian Creole |
| hu | Hungarian |
| do | Yiddi |
| hy | Armenia |
| yo | Yoruba |
| ig | Igbo |
| of | Africans |
| is | Islam |
| am | Amhara |
| iw | The Hebrew |
| the | Azerbaijan |
| to | Zulu |
| ro | Rumania |
| ceb | Cebuano |
| be | Belarussia |
| bg | Bulgaria |
| rw | Kinyarwanda |
| bn | Bengali |
| bs | Bosnia |
| sd | Sindhi |
| the | Georgia |
| and | Sinhala |
| sk | Slovakia |
| sl | Slovenia |
| sm | Samoa |
| sn | Shona |
| so | Somali |
| sq | Albania |
| ca | tuned |
| sr | Serb |
| kk | Jumper |
| st | English |
| km | Khmer |
| sv | Swedish |
| sw | Swahili |
| to | Kurdish |
| co | Corsica |
| facing | Tamil |
| ky | Kirghiz |
| cs | Czech |
| the | Telugu |
| tg | Tajik |
| the | Latin |
| lb | Luxembourg |
| cy | Wales |
| tk | Turkmen |
| tl | Tagalog |
| and | Denmark |
| tt | Tatar |
| lt | Lithuania |
| lv | Latvia |
| and | Uyghur |
| uk | Ukraine |
| mg | Malagasy |
| mi | Maori |
| ur | Urdu |
| mk | Macedonia |
| haw | Hawaii |
| ml | Malayalam |
| mn | Mongol |
| mr | Marathi |
| to | Uzbek |
| mt | Malta |
| he | Greece |
| eo | Esperanto |
| my | Burma |
| et | Estonia |
| eu | Basque |
| it is | Nepal |
| fa | Farsi |
| nl | Dutch |
| no | Norwegian |
| fi | Finland |
| the | Chinese |
| fy | Frisia |
| ga | Gaelic |
| gd | Scottish Gaelic |
| gl | Galicia |
| xh | Xhosa |
| pa | Punjabi |
| ha | Hausa |
| pl | Poland |
| ps | Pashto |
| pt | Portuguese |
| ht | Haitian Creole |
| is | Islam |
| lo | Laos |
| or | Odia (Oriya) |
| gu | Gujarati |
| tr | Turki |
Special for Median UI 1.6 User
For those who use Median UI 1.6 template, below is the tutorial. If you follow the below steps without following the above tutorial, you can easily add google translate widget to your blogger blog. I suggest you to follow below steps. Because it is only for Median UI. For 1.6 users. (You can try using any of Jagodesain's templates, it might work.)
- First go to your blogger dashboard. Then go to Themes and click on Edit HTML from the drop-down menu, you will be redirected inside the theme.
- Now search inside the theme ]]></b:skin> and paste the following CSS codes above this ]]></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}- Now find the following codes inside your theme.
<!--[ 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 the above codes, paste the following codes below the </b:if> tag at the end of the above codes.
<div class='tIc bIc' id='google_translate_element'/>
- Now lastly, copy the javascript codes below, locate the </body> tag inside the theme and paste it above it. It is usually at the end of the theme.
<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/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>
Tags
HTLM CODE
