Thêm tiện ích Google Translate tùy chỉnh vào blogspot/blogger

Cần sửa lỗi google dịch tùy chỉnh trên blogger do tiện ích google dịch cực nhẹ hiện nay đã bị lỗi trên một số trình duyệt do có sự thay đổi của google. Trong khi google dịch là tương đối cần thiết đối với các website/blogger, mặc dù trên các phương tiện lướt web cũng đã có chức năng dịch nhưng với Google Translate tích hợp ngay trên web/blog sẽ là điều tiện lợi hơn.

DEMO
Sau đây là hướng dẫn thêm Google Translate tùy chỉnh vào blogspot/blogger đã có chỉnh sửa lỗi như đã nói ở trên. Để thêm Google dịch vào blogger ta cần tiến hành theo 3 bước.
Bước 1: Thêm CSS.
Tìm thẻ ]]></b:skin> và dán đoạn Code sau vào trên nó.

/* Google Transalte */ 
#google_translate_element{/* Điều chỉnh vị trí icon cho phù hợp với margin:  */}
.goog-te-banner-frame.skiptranslate, .goog-te-gadget-simple img, .goog-te-gadget-simple span, img.goog-te-gadget-icon, .goog-te-menu-value span, #goog-gt-tt, .goog-tooltip, .goog-tooltip:hover, .goog-logo-link, .goog-te-balloon-frame{display:none!important}
.skiptranslate.goog-te-gadget, .goog-te-gadget-simple{width:20px !important;height:20px !important;padding:0 !important;border-radius:2px !important}
.goog-te-gadget-simple{background-color:transparent!important; background: url("data:image/svg+xml,%3C%3Fxml version='1.0' %3F%3E%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle/%3E%3Cg data-name='Google Translate' id='Google_Translate'%3E%3Cg data-name='<Group>' id='_Group_'%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' data-name='<Path>' id='_Path_' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round'/%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' data-name='<Path>' id='_Path_2' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round'/%3E%3Cline data-name='<Path>' id='_Path_3' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round' x1='17' x2='13.5' y1='19.5' y2='23.5'/%3E%3Cline data-name='<Path>' id='_Path_4' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round' x1='14.5' x2='21.5' y1='10.5' y2='10.5'/%3E%3Cline data-name='<Path>' id='_Path_5' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round' 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' data-name='<Path>' id='_Path_6' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round'/%3E%3Cpath d='M16,13c.54,1.33,4,4.5,4,4.5' data-name='<Path>' id='_Path_7' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round'/%3E%3Cpath d='M10.1,7.46a4,4,0,1,0,1.4,3h-4' data-name='<Path>' id='_Path_8' style='fill:none;stroke:%23999;stroke-linecap:round;stroke-linejoin:round'/%3E%3C/g%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;padding:0;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;float:right !importan}
.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none !important}body{top:0 !important}

Bước 2: Thêm HTML để hiện thị icon Google Translate, bằng cách chèn đoạn mã sau vào nơi bạn muốn.

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

Bước 3: Chèn javascript sau vào trước thẻ </body>. Ở đây sử dụng Javascript Lazyload tức là tiện ích hiển thị sau khi cuộn trang.

<script>/*<![CDATA[*/
        // Google Translate Language
    function googleTranslateElementInit(){new google.translate.TranslateElement({pageLanguage:'vi',includedLanguages:'ar,bn,zh-CN,zh-TW,cs,de,en,es,fr,hi,id,it,ja,jw,km,ko,lo,ms,ne,ru,sn,th,tr,vi',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
       // Google Translate link js
     window.addEventListener("load",function(){function a(){if(0==b){b=1;var a=document.createElement("script");a.async=!0,a.src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit";var c=document.getElementsByTagName("script")[0];c.parentNode.insertBefore(a,c)}}var b=0;window.addEventListener("scroll",function(){a()})});
    /*]]>*/</script>

Lưu ý: pageLanguage:'vi' trong đó vi là ngôn ngữ blog của bạn, ở đây là tiếng Việt.
Nếu muốn hiện thị tất cả các ngôn ngữ như trong ảnh:

thì thay phần javascript (// Google Translate Language) bằng js bên dưới.

function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: 'vi', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
}

Tham khảo thêm sửa lỗi google dịch tùy chỉnh cho template Plus UI v2.6 tại đây.