Home
Blogger

How To Add Google Translator In Blogger

Google Translator Is A Popular Free Service By Google Which Instantly Translates Sentences , Phrases & Web Pages In Multiple Available Language.


Why To Add Google Translator In Blogger

Suppose If Your Blog Is Being Read In Multiple Countries , Then Translating Your Blog Post's Content In Their Native Language Will Be Helpful For Foreign Readers. By Adding Google Translator Widget In Your Blog , Readers Can Switch From One Language To Another Language Instantly.

Adding Google Translator Widget In Blogger

To Include Google Translator In Your Blog , Firstly Make A Backup Of Your Current Template So That If Any Error Occur , Then You Can Restore Your Blog Using Already Backup Template.

Google Translator In Blogger

  • Open Blogger DashBoard
  • Goto Theme Section
  • Backup Your Template (Important)
  • Click On Edit HTML
  • Enter Following Code Before Closing Of </style> Tag

    • /* Google Translator */ 
#googleTranslateit{padding:0;margin-right:5px} .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%3Cg style='fill:none;stroke:%23262d3d;stroke-linecap:round;stroke-linejoin:round'%3E%3Cpath d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' /%3E%3Cpath 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' /%3E%3Cline x1='17' x2='13.5' y1='19.5' y2='23.5' /%3E%3Cline x1='14.5' x2='21.5' y1='10.5' y2='10.5' /%3E%3Cline x1='17.5' x2='17.5' y1='9.5' y2='10.5' /%3E%3Cpath d='M20,10.5c0,1.1-1.77,4.42-4,6' /%3E%3Cpath d='M16,13c.54,1.33,4,4.5,4,4.5' /%3E%3Cpath d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' /%3E%3C/g%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} .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%3Cg style='fill:none;stroke:%23fefefe;stroke-linecap:round;stroke-linejoin:round'%3E%3Cpath d='M.5,2V18A1.5,1.5,0,0,0,2,19.5H17L10.5.5H2A1.5,1.5,0,0,0,.5,2Z' /%3E%3Cpath 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' /%3E%3Cline x1='17' x2='13.5' y1='19.5' y2='23.5' /%3E%3Cline x1='14.5' x2='21.5' y1='10.5' y2='10.5' /%3E%3Cline x1='17.5' x2='17.5' y1='9.5' y2='10.5' /%3E%3Cpath d='M20,10.5c0,1.1-1.77,4.42-4,6' /%3E%3Cpath d='M16,13c.54,1.33,4,4.5,4,4.5' /%3E%3Cpath d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' /%3E%3C/g%3E%3C/svg%3E") center / 12px no-repeat;-webkit-transition:all .2s ease;transition:all .2s ease;background-size: 20px 20px}
  • After That Enter Following Code Where You Want To Show Google Transtion Option. For Example After Search Icon
    • <b:if cond='data:view.isPost'>
<!--[ Google Translator ]-->
<div id='googleTranslateit'/>
</b:if>
  • After That Enter Following Code Before Closing Of </body> Tag
    • <b:if cond='data:view.isPost'>
<!--[ Google Translator ]-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
        <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="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0); /*]]>*/</script>
        <script>/*<![CDATA[*/ function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'en',includedLanguages:'en,hi,mr,fr,es',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'googleTranslateit')}$('.hover').mouseleave(function (){$(this).removeClass('hover')}); /*]]>*/</script>
</b:if>
  • Add Or Remove Highlighted Code To Include More Language From Link Given Below
  • Done, Save The Template

Google Translator Language Code

Check Code

Post a Comment