Follow me on Google News Follow
  Views

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

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

About the Author

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

Đăng nhận xét

  • Home
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.

Ads Blocker Detected!

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

Refresh