Instructions for Adding Google Translate Gadget to Blogger

Adding Google Translate Utilities to Blogger – Blog is a large environment, with Viewers that can come from everywhere, so it is extremely important that the language is suitable for each Viewer, it determines the retention of Viewer in back to our Website.

Instructions for Adding Google Translate Gadget to Blogger

Instructions for Adding Google Translate Gadget to Blogger

Step 1: We access Blogger

Step 2: Go to Themes and select edit HTML

Step 3: Find the tag ]]></b:skin> and paste the following code in

#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 ,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}%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}%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}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}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}

Note: Adjust the ” margin-right:5px;margin-top:15px ” to suit your Blog.

Step 4: This is the step where you add Google Translate where you want to display
You insert the following code:

<div id='google_translate_element'></div>

In the next step, you can choose one of two types: Deferred Javascript and Lazy Javascript

Step 5: You continue to add the following code before the closing </body> tag .

Javascript Delay:

<script>/*<![CDATA[*/
(function() { var add = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value = 'anonymous'; add.setAttributeNode(crs); add.defer = true; add.src = 'https://kenbtec.github.io/translatewebsite/f4.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); }) ();

/*]]>*/

</script>

<script>

function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'vi',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>

Javascript Lazy

<script>/*<![CDATA[*/
(function() { var add = document.createElement('script'); var crs = document.createAttribute('crossorigin'); crs.value = 'anonymous'; add.setAttributeNode(crs); add.defer = true; add.src = 'https://kenbtec.github.io/translatewebsite/f4.js'; var sc = document.getElementsByTagName('head')[0]; sc.parentNode.insertBefore(add, sc); }) ();

/*]]>*/

</script>

<script>

function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'vi',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>

You configure as follows: 

  • pageLanguage:’id’ – You change that id to the language of your article.
  • en, id, vi,zh-CN,th,ru… – You can add or subtract languages ​​it will translate.
A shortlist of languages ​​you can access here!
-stands and just Save and watch the fruits come on!
Good luck!
Click to rate this post!
[Total: 0 Average: 0]
27
Subscribe
Notify of
guest
0 Góp ý
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x