Thêm công cụ Google Translate vào Blogspot chi tiết nhất

You are reading: 
Thêm công cụ Google Translate vào Blogspot chi tiết nhất
 in iTechrum.com

Hello chào 500 anh em, chúng ta đang sống một thế giới đa ngôn ngữ. Vì vậy, các bài viết trên web nếu độc giả đến từ nhiều khu vực khác nhau thì chúng ta phải có công cụ dịch thuật phù hợp với từng nước. Trong bài viết nay iTechrum sẽ hướng dẫn các bạn cách thêm công cụ Google Translate vào bài viết Blogspot một cách chi tiết nhất.

Công cụ Google Translate là gì?

Google Translate hay Google Dịch là dịch vụ dịch thuật nổi tiếng và phổ biến trên thế giới của gã khổng lồ tìm kiếm Google. 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.

Ảnh demo về Google Translate 
Lưu ý: Bạn nào đang dùng template Median UI hoặc Fletro các bạn làm theo hướng dẫn sau đây, còn những mẫu template khác mình chưa thử.

Các bước thêm công cụ Google Translate vào Blogspot

Bước 1: Đầu tiên các bạn vào Chỉnh sửa HTML ➔ 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}

Lưu ý: Bạn hãy tùy chỉnh cho phù hợp với mẫu template.
Bước 2: Bạn thêm đoạn js dưới đây trên thẻ </body>

Đoạn code 1: Nếu bạn muốn 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>

Đoạn code 2: Nếu bạn muốn những ngôn ngữ phổ biến thì copy đoạn dưới.



<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',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ô xanh en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn bạn có thể thêm hoặc xóa bớt những ngôn ngữ không cần thiết: Link Danh sách ngôn ngữ.
Bước 3: Các bạn thêm đoạn code HTML dưới chỗ nào bạn muốn hiển thị Google Translate.

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

Bước cuối: Lưu mẫu lại và kiểm tra kết quả!

Lời kết

Trên đây là những gì mình chia sẻ cho các bạn 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!

Thành Đạt – Tổng hợp và edit
Bài viết được bảo vệ bởi DMCA. DMCA.com Protection Status

4 / 169 rates
iTechrum.com

Học để làm - Học để chia sẻ

Post a Comment

➔ Attach images on the article for the best support.
➔ To comment with photos, go to the page Upload Photos, Drag and drop to upload images.
➔ You paste the image link URL into the comment box and press Publish, Photos will be automatically uploaded.
➔ Do not spam in the comment box, limit abbreviations.
➔ Check the box Notify me (Notify me) to receive Admin's feedback notification

Previous Post Next Post

Ads Blocker Detected!

We have detected that you are using an extension to block ads. Please support us by disabling these ad blockers.

Refresh