Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger

 NỘI DUNG

Sau khi tham khảo qua cách làm của Nguyễn Lâm Blog thì theo như những thông tin mà chủ sở hữu cung cấp thì chức năng này chưa thể dịch qua ngôn ngữ "Anh".



Blog là một môi truờng lớn, với lượng Viewer có thể đến từ khắp mọi nời, vì vậy việc ngôn ngữ phù hợp với từng Viewer là vô cùng quan trọng, nó quyết định việc giữ chân Viewer ở lại Website của chúng ta.
Theo như một vài chia sẻ của Nguyễn Lâm Blog thì việc thêm tiện ích này vào trong phần bố cục thì sẽ khiến nặng hơn. Nên chúng ta thực hiện như sau:

Bước 1: Chúng ta truy cập vào Blogger

Bước 2: Vào phần Chủ đề và chọn chỉnh sửa HTML

Bước 3: Tìm thẻ ]]></b:skin> và dán đoạn Code sau vào

 
#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 7.17,8.08C5.86,8.08 4.79,9.17 4.79,10.5C4.79,11.83 5.86,12.92 7.17,12.92C8.54,12.92 9.13,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}
body{top:0px!important}

Chú ý: Các bản chỉnh "margin-right:5px;margin-top:15px" sao cho phù hợp với Blog của các bạn nhé <3

Bước 4: Đây là bước các bạn thêm Google Dịch vào nơi bạn muốn hiển thị
Các bạn chèn đoạn mã sau:

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

Ở bước tiếp theo các bạn có thể lựa chọn một trong 2 loại: Javascript Trì Hoãn và Javascript Lazy

Bước 5: Các bạn tiếp tục thêm đoạn Code sau trước thẻ đóng </body>. Theo như Nguyễn Lâm Blog đã cung cấp cho chúng ta 2 loại và Sau khi mình fix lại để có thể dịch qua ngôn ngữ "Anh" thì nó như sau:

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:&#39;vi&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
</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:&#39;vi&#39;,includedLanguages:&#39;en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn&#39;,layout:google.translate.TranslateElement.InlineLayout.SIMPLE},&#39;google_translate_element&#39;)}$(&quot;.hover&quot;).mouseleave(function (){$(this).removeClass(&quot;hover&quot;)});
</script>

Các bạn cấu hình như sau: 

  • pageLanguage:&#39;id&#39 - Các bạn thay chữ id đó thành ngôn ngữ bài viết của bạn.
  • en,id,vi,zh-CN,th,ru... - Các ban có thể thêm hoặc bớt ngôn ngữ mà nó sẽ dịch.
Danh sách viết tắt các ngôn ngữ các bạn truy cập tại đây nhé!
Cuối cùng chỉ cần Lưu lại và xem thành quả thôi nào!
Chúc các bạn thành công!