Hưỡng Dẫn Thêm Tiện Ích Google Translate Cho Blogger - Zoy Thủ Thuật Blog

Chia sẻ cách thêm Google Translate (Google dịch) vào blogspot.

Cách Thêm Tiện Ích Vào Blogger:

Để có thể thêm tiện ích Google Translate các bạn làm như sau:

Bước 1: Truy cập vào Blogger nhấn chọn Chỉnh sửa HTML

Bước 2: Tìm đến thẻ ]]></b:skin> và dán đoạn CSS dưới đây lên trên thẻ đó.

#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}

Ghi chú: Nếu vị trí Google Translate bị lệch các bạn có thể chỉnh như sau:

• margin-right:5px - Nếu giá trị càng lớn thì nó sẽ sang bên trái.
• margin-top:15px - Nếu giá trị càng lớn thì sẽ càng đi xuống.

Bước 3: Thêm đoạn HTML này vào nơi nào bạn muốn hiển thị

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

Bước 4: Thêm JavaScript này lên trên thẻ </body> nhé. Ở đây sẽ có hai loại bạn có thể chọn một trong hai nhé

JavaScript Trì Hoàn

Với loại này nó sẽ đợi load trang xong mới hiển thị nhé!

<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://cdn.jsdelivr.net/gh/sunii-g/data/translate.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 Lazyload

Với loại này nó sẽ xuất hiện khi bạn scroll nhé!

<script>/*<![CDATA[*/
var lazyts=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyts||0!=document.body.scrollTop&&!1===lazyts)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://cdn.jsdelivr.net/gh/sunii-g/data/translate.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyts=!0)},!0);
/*]]>*/
</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ó thể 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 toàn bộ ngôn ngữ viết tắt: Nhấn vào đây

Cuối cùng là lưu lại và xem thành quả nhé.

Tham khảo:
https://www.quangsangit.com/