Blog iTeam OS
Trang chủ
Blogspot Tips

Hướng dẫn thêm tiện ích Google Translate vào Blogspot

Google Translate/Google Dịch là dịch vụ dịch thuật nổi tiếng và phổ biến trên thế giới. Người dùng có thể dịch thuật nhanh chóng trên Google Translate
Hướng dẫn thêm tiện ích Google Translate vào Blogspot
Hướng dẫn thêm tiện ích Google Translate vào Blogspot

Xin chào các bạn. Trong bài viết này thì mình sẽ hướng dẫn thêm tiện ích Google Translate vào Blogspot mới 2022.

Google Translate là gì?

Google Translate/Google Dịch là dịch vụ dịch thuật nổi tiếng và phổ biến trên thế giới. Người dùng có thể dịch thuật nhanh chóng trên Google Translate với nhiều ngôn ngữ khác nhau, nguồn dịch khác nhau.

Bạn có thể nhập nội dung văn bản để dịch trên Google Translate như những ứng dụng dịch thuật khác, hoặc chụp ảnh để dịch thuật, thu âm giọng để để dịch.

Hướng dẫn thêm tiện ích Google Translate vào Blogspot mới 2021
Ảnh demo

Hướng dẫn cài đặt

Bước 1: Các bạn copy đoạn CSS dưới và dán chúng trên thẻ ]]></b:skin> 


#google_translate_element{padding:0;margin-right:5px;margin-top:0px}
.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:%23000000;background:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUxMiA1MTIiIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjZTZlNmU2IiBkPSJNNDc5LjA2OCw5NmgtMjE2LjMybC0yMi41MTUsODcuMWwtOC4wODMsNTcuMjQybDQzLjMyOSwxMjAuODQ1bDYuOTU3LDE0Ni42MzloMTk2LjYzMw0KCWMxOC4xODQsMCwzMi45MzItMTQuNzQ4LDMyLjkzMi0zMi45MzJWMTI4LjkzMkM1MTIsMTEwLjc0OCw0OTcuMjUyLDk2LDQ3OS4wNjgsOTZ6Ii8+PHBvbHlnb24gZmlsbD0iIzNhNWJiYyIgcG9pbnRzPSIzNjguNjk2IDQxNiAyODIuNDM1IDUwNy44MjYgMjUxLjg4MiA0MTYgMjY0LjM0OCAzODIuNTIxIi8+PHBhdGggZmlsbD0iZ3JheSIgZD0iTTQ2OS41NjUsMjQ0LjE3NHYtMjAuODdoLTc5LjMwNHYtMjkuMjE3aC0yMC44N3YyOS4yMTdIMjk3LjkydjIwLjg3aDExNS44OQ0KCWMtNi40NDYsMTMuNTcyLTE3LjYyMSwzNS4yMTUtMzIuOTc4LDU4LjAzNWMtMTQuMTMyLTE3LjY0OS0yMy4wNjItMjkuOTMxLTIzLjE2OC0zMC4wNzdsLTYuMTI5LTguNDQ1bC0xNi44OTIsMTIuMjU1bDYuMTI3LDguNDQ1DQoJYzAuNDc3LDAuNjU4LDEwLjg3NiwxNC45NjMsMjcuMzM4LDM1LjNjLTExLjIyMiwxMy43NDktMzEuODA4LDM2LjEwNi00Mi42NTUsNDYuOTUybDE0Ljc1NiwxNC43NTYNCgljOS4zNjItOS4zNjIsMjguNzc0LTMwLjIxNCw0MS40MjYtNDUuMzI3YzE2LjQ1OSwxOS41NTMsMzIuNTIzLDM3LjE5NCw0Ny44NTQsNTIuNTI2bDcuMzc4LDcuMzc4bDE0Ljc1OC0xNC43NTVsLTcuMzc4LTcuMzc4DQoJYy0xNS44MzktMTUuODM5LTMyLjUxOS0zNC4yNjQtNDkuNjQ3LTU0Ljc5OWMyMi4xMzMtMzEuODIzLDM2LjQ4LTYxLjk1Niw0Mi4yLTc0Ljg2Nkg0NjkuNTY1eiIvPjxwYXRoIGZpbGw9IiM1MThlZjgiIGQ9Ik0zNDkuMzI5LDM1Ny41MjNMMzY4LjY5Niw0MTZIMjUxLjg4MkgzMi45MzJDMTQuNzM0LDQxNiwwLDQwMS4yNTIsMCwzODMuMDY4VjM3LjEwNg0KCUMwLDE4LjkyMiwxNC43MzQsNC4xNzQsMzIuOTMyLDQuMTc0aDE5OS40MTZMMjYyLjc0OCw5Nmw0NS42MDcsMTM3LjczOUwzNDkuMzI5LDM1Ny41MjN6Ii8+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTE0OS4zMDEsMjg3LjM3NGMtNDIuNzcsMC03Ny41NjUtMzQuNzk1LTc3LjU2NS03Ny41NjVzMzQuNzk1LTc3LjU2NSw3Ny41NjUtNzcuNTY1DQoJYzIwLjcwNCwwLDQwLjE4Miw4LjA2NSw1NC44NDUsMjIuNzEybC0xNC43NDksMTQuNzY2Yy0xMC43MjMtMTAuNzEtMjQuOTYxLTE2LjYwOC00MC4wOTctMTYuNjA4DQoJYy0zMS4yNjMsMC01Ni42OTYsMjUuNDMzLTU2LjY5Niw1Ni42OTZzMjUuNDMzLDU2LjY5Niw1Ni42OTYsNTYuNjk2YzI3LjY5OCwwLDUwLjgyLTE5Ljk2Nyw1NS43MzMtNDYuMjYxaC01NS43MzF2LTIwLjg3aDc3LjU2NQ0KCXYxMC40MzVDMjI2Ljg2NiwyNTIuNTc5LDE5Mi4wNzEsMjg3LjM3NCwxNDkuMzAxLDI4Ny4zNzR6Ii8+PC9zdmc+") 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: 12px; width: 34px;height: 34px;}
body{top:0px!important}

Bước 2: Bạn muốn công cụ Google Translate xuất hiện ở đâu thì bạn copy doạn HTML duoiws dán vào chỗ bạn muốn.


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

Bước 3: Thêm đoạn js trên thẻ </body>

  • Đoạn code 1: Những ngôn ngữ phổ biến
    • 
<script type='text/javascript'>
function googleTranslateFunction(){
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');
} </script>

    - Chỗ mình tô xanh: vi là ngôn ngữ chính của bài viết.

    - Dòng mình tô đỏ bạn có thể thêm hoặc xóa bớt những ngôn ngữ không cần thiết: Danh sách ngôn ngữ

  • Đoạn code 2: Full 52 ngôn ngữ thì copy đoạn dưới
    • 
 <script type='text/javascript'>
function googleTranslateFunction(){
new google.translate.TranslateElement({pageLanguage:'hi', layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element');
} </script>
 
<script type='text/javascript'>
//<![CDATA[
(function(){var gtConstEvalStartTime = new Date();/*

    Copyright The Closure Library Authors.
    SPDX-License-Identifier: Apache-2.0
   */
   var h=this||self,l=/^[\w+/_-]+[=]{0,2}$/,m=null;
    function n(a){
       return(a=a.querySelector&&a.querySelector("script[nonce]"))&&(a=a.nonce||a.getAttribute("nonce"))&&l.test(a)?a:""
    }
    function p(a,b){
       function c(){}c.prototype=b.prototype;
       a.i=b.prototype;a.prototype=new c;
       a.prototype.constructor=a;
       a.h=function(g,f,k){
           for(var e=Array(arguments.length-2),d=2;
           d<arguments.length;d++)e[d-2]=arguments[d];
           return b.prototype[f].apply(g,e)
        }
    }
    function q(a){return a};
    function r(a){
        if(Error.captureStackTrace);
        else{var b=Error().stack;b&&(this.stack=b)}a&&(this.message=String(a))
    }

    r.prototype.name="CustomError";
    function u(a,b){
        a=a.split("%s");
        for(var c="",g=a.length-1,f=0;
        f<g;f++)c+=a[f]+(f<b.length?b[f]:"%s");
        r.call(this,c+a[g])
    }
    p(u,r);
    u.prototype.name="AssertionError";
   function v(a,b){
       throw new u("Failure"+(a?": "+a:""),Array.prototype.slice.call(arguments,1));
    };
    var w;
    function x(a,b){this.g=b===y?a:""}x.prototype.toString=function(){return this.g+""};var y={};
   function z(a){
       var b=document.getElementsByTagName("head")[0];b||(b=document.body.parentNode.appendChild(document.createElement("head")));
       b.appendChild(a)
    }
   function _loadJs(a){
       var b=document;
       var c="SCRIPT";"application/xhtml+xml"===b.contentType&&(c=c.toLowerCase());
       c=b.createElement(c);
       c.type="text/javascript";
       c.charset="UTF-8";
       if(void 0===w){b=null;var g=h.trustedTypes;
        if(g&&g.createPolicy){
            try{b=g.createPolicy("goog#html",{createScriptURL:q})}
            catch(t){h.console&&h.console.error(t.message)}w=b}
            else w=b
        }
        a=(b=w)?b.createScriptURL(a):a;a=new x(a,y);a:{
            try{
                var f=c&&c.ownerDocument,k=f&&(f.defaultView||f.parentWindow);k=k||h;
                if(k.Element&&k.Location){var e=k;break a}}
                catch(t){}e=null}
                if(e&&"undefined"!=typeof e.HTMLScriptElement&&(!c||!(c instanceof e.HTMLScriptElement)&&(c instanceof e.Location||c instanceof e.Element))){
                    e=typeof c;
                    if("object"==e&&null!=c||"function"==e)
                    try{}
                    catch(t){}
                    else d=void 0===c?"undefined":null===c?"null":typeof c;v()
                }
                a instanceof x&&a.constructor===x?d=a.g:(d=typeof a,v("expected object of type TrustedResourceUrl, got '"+a+"' of type "+("object"!=d?d:a?Array.isArray(a)?"array":d:"null")),d="type_error:TrustedResourceUrl");c.src=d;
                (d=c.ownerDocument&&c.ownerDocument.defaultView)&&d!=h?d=n(d.document):(null===m&&(m=n(h.document)),d=m);
                d&&c.setAttribute("nonce",d);z(c)
    }
   function _loadCss(a){
       var b=document.createElement("link");
       b.type="text/css";b.rel="stylesheet";
       b.charset="UTF-8";b.href=a;z(b)
    }
    function _isNS(a){
        a=a.split(".");
        for(var b=window,c=0;c<a.length;++c)if(!(b=b[a]))return!1;
        return!0
    }
   function _setupNS(a){
       a=a.split(".");
       for(var b=window,c=0;c<a.length;++c)b.hasOwnProperty?b.hasOwnProperty(a)?b=b[a]:b=b[a[c]]={}:b=b[a]||(b[a]={});
       return b
    }
   
   
   
   if (_isNS('google.translate.Element')){return}(function(){
       var c=_setupNS('google.translate._const');
       c._cest = gtConstEvalStartTime;gtConstEvalStartTime = undefined;c._cl='en';
       c._cuc='googleTranslateFunction';
       c._cac='';c._cam='';c._ctkk='447972.1887378764';
   var h='translate.googleapis.com';
   var s=(true?'https':window.location.protocol=='https:'?'https':'http')+'://';
   var b=s+h;c._pah=h;c._pas=s;c._pbi=b+'/translate_static/img/te_bk.gif';
   c._plla=h+'/translate_a/l';c._ps=b+'/translate_static/css/translateelement.css';
   c._puh='translate.google.com';
   _loadCss(c._ps);_loadJs(b+'/translate_static/js/element/main.js');})();})();
//]]>
</script>

    Kết luận:

    Như vậy ở trên iTeamOS đã chia sẻ cách thêm tiện ích Google Translate vào Blogspot. Mọi thắc mắc hay góp ý các bạn hãy để lại bình luận phía dưới. Chúc bạn thành công!