Welcome to our comprehensive guide on how to seamlessly integrate a Google Translate button into your Blogger website.
In this article, we’ll walk you through the process of adding translate button for website step by step, ensuring that your Blogger website becomes even more user-friendly and welcoming to visitors from around the world.
Step-By-Step Guide To Adding The Google Translate Button
- Login To Your Blogger Account
- Go To THEME And Then EDIT HTML
- Find The Appropriate Location To Add Translate Button By Inspect
- Iff You Are Not Able To Inspect You Can Put This Button Html Above Your First Close Header Tag</Header>
<div id='google_translate_element'></div>
- Now Go To Bottom Site Of THEME And Add This Code Above Your Close Body Tag </Body>
<style>#google_translate_element{padding:0;}
body{top:0!important}
font{background:transparent!important;box-shadow:none!important}
.goog-te-gadget-simple img,.goog-te-gadget-simple .VIpgJd-ZVi9od-xl07Ob-lTBxed span,#goog-gt-tt,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}
iframe.skiptranslate{border-left:none!important;border-top:none!important;border-bottom:none!important;border-right:none!important;border:none;box-shadow:none}
.goog-te-gadget-simple{background-color:transparent!important;background:url("https://upload.wikimedia.org/wikipedia/commons/d/d7/Google_Translate_logo.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}
.dark-mode .goog-te-gadget-simple{background-color:transparent!important;background:url("https://upload.wikimedia.org/wikipedia/commons/d/d7/Google_Translate_logo.svg") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px;}</style>
<script>/*<![CDATA[*/
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: 'en',
includedLanguages: 'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw',
layout: google.translate.TranslateElement.InlineLayout.SIMPLE
},
'google_translate_element'
)
};
function translateOnload(){var script = document.createElement('script');script.async = true;script.src = 'https://cdn.wendycode.com/blogger/widget/google-translate-free.js?cb=googleTranslateElementInit';document.body.appendChild(script);}function wcTjLzy(){translateOnload();localStorage.setItem("wcGoogleTj","true");}var wcTjStrg = localStorage.getItem("wcGoogleTj");if ("true" != wcTjStrg){var t_wcTj = false;var e_wcTj = false;window.addEventListener("scroll",() =>{if ((document.documentElement.scrollTop != 0 && !t_wcTj) || (document.body.scrollTop != 0 && !t_wcTj)){wcTjLzy();t_wcTj = true;e_wcTj = true;}},true);window.addEventListener("click",() =>{if (!e_wcTj && !e_wcTj){wcTjLzy();e_wcTj = true;t_wcTj = true;}},true);}if ("true" === wcTjStrg){translateOnload();}
/*]]>*/
</script>
- Now You Can Change You Favourite Language Code Iff You Want To Add More Or Less
- Congratulations You Have Successfully Added Translate Button In Your Blogger Website
