Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger Mới Nhất 2021

Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger Mới Nhất 2021

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.
Thêm Tiện Ích Google Dịch Cực Nhẹ Vào Blogger Mới Nhất 2021
Theo như một vài chia sẻ của mình 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:
  1. Chúng ta truy cập vào Blogger
  2. Vào phần Chủ đề và chọn chỉnh sửa HTML
  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ư mình đã 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 trì hoãn:

<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! Thêm Tiện Ích Google Dịch

Nguồn: Nguyễn Lâm Blog

Bài viết liên quan

Tâm Thư Kêu Gọi Xây Dựng Ni Xá Tu Viện Long Hưng Tại Thành Phố Hồ Chí Minh

TÂM THƯ KÊU GỌI XÂY DỰNG NI XÁ TU VIỆN LONG HƯNG TẠI THÀNH PHỐ HỒ CHÍ MINH Kính bạch Chư Tôn Thiền Đức Tăng Ni! Kính thưa quý Phật Tử xa gần! Chúng con kính nghe: "Phật Pháp xương minh do Tăng già hoằng hóa. Thiền môn hưng thịnh do đàn Việt phát tâm." […]

Xem thêm

Những điều cần biết về Ransomware WannaCry – Virus Chỉ Muốn Khóc

Chào các bạn! Bạn có biết? Hôm 12/5, một cuộc tấn công mạng quy mô lớn, dường như sử dụng các công cụ đánh cắp từ Cơ quan an ninh quốc gia Mỹ (NSA), đã ảnh hưởng tới một loạt các quốc gia khắp thế giới, với khoảng 75.000 máy tính bị nhiễm mã độc […]

Xem thêm

Chúc mừng năm mới 2020 – An khang thịnh vượng !

Vậy là năm 2019 đã đi qua với nhiều kỷ niệm cùng nhiều bài viết mới trên blog Tự Học MMO ! Năm 2020 Canh Tý đã tới – hứa hẹn 1 năm thành công với tất cả anh em đã, đang và sẽ tham gia kiếm tiền trên mạng MMO. Chúc mừng năm mới […]

Xem thêm

Những điều cần biết về Ransomware WannaCry – Virus Chỉ Muốn Khóc

Chào các bạn! Bạn có biết? Hôm 12/5, một cuộc tấn công mạng quy mô lớn, dường như sử dụng các công cụ đánh cắp từ Cơ quan an ninh quốc gia Mỹ (NSA), đã ảnh hưởng tới một loạt các quốc gia khắp thế giới, với khoảng 75.000 máy tính bị nhiễm mã độc […]

Xem thêm

Chúc mừng năm mới 2020 – An khang thịnh vượng !

Vậy là năm 2019 đã đi qua với nhiều kỷ niệm cùng nhiều bài viết mới trên blog Tự Học MMO ! Năm 2020 Canh Tý đã tới – hứa hẹn 1 năm thành công với tất cả anh em đã, đang và sẽ tham gia kiếm tiền trên mạng MMO. Chúc mừng năm mới […]

Xem thêm