Blog mới của Nguyễn Lâm Blog. Welcome

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

 Chào mừng bạn đến với Nguyễn Lâm Blog, hôm nay mình sẽ chia sẻ cho các bạn tiện ích Google Dịch nhé.

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

Nếu blog của bạn có nhiều lượt truy cập nước ngoài thì tiện ích này là một sự lựa chọn rất tốt cho blog của bạn. Nó sẽ giúp cho những người đọc đó chuyển qua ngôn ngữ của họ một cách dễ dàng.


Ở trong phần bố cục của Blogger cũng có tiện ích Google Dịch, các bạn có thể vào Bố cục -> Thêm tiện ích -> Google Dịch nhưng sẽ làm blog của bạn nặng hơn.

Còn tiện ích mình chia sẻ dưới đây sẽ nhẹ hơn nhiều, bởi vì mình có sử dụng lazyload, nó sẽ không làm cho tốc độ tải trang của bạn chậm đi.

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

Để thêm tiện ích Google dịch vào blogger các bạn hãy làm như sau nhé.

Bước 1: Như thường lệ, các bạn hãy truy cập vào Trang chủ Blogger.

Bước 2: Nhấp vào Chủ đề Chỉnh sửa HTML.

Bước 3: Tìm đến thẻ ]]></b:skin> và dán nó vào trên thẻ đó nhé.

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

Nếu vị trí nút Google Dịch 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 4: Thêm nút Google Dịch này vào chỗ các bạn muốn nó hiển thị nhé. Của mình là để trên phần đầu của bài viết.

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

Bước 5: Thêm JavaScript này vào trên thẻ </body> nhé. Mình sẽ tích hợp cho các bạn 2 loại, 1 là trì hoãn và 2 là lazy nhé.

JavaScript Trì Hoãn

Với loại này, nó sẽ đợi load xong trang web của bạn rồi mới xuất hiệ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://cdn.jsdelivr.net/gh/nguyenlamblog/nguyenlamblog.xyz@1b07d7e/JS/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 Lazy

Với loại này, nó sẽ không xuất hiện cho đến khi bạn cuộn trang 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/nguyenlamblog/nguyenlamblog.xyz@1b07d7e/JS/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ấ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ữ: Truy cập tại đây nhé.

Cuôi cùng lưu chủ đề và xem kết quả nhé.

25 comments

  1. Còn ai thức khum :<
  2. Unfortunately this widget cannot appear on the homepage of the Median UI v 1.5 template
    1. I just add to the post, if you want to add all the pages just put it near the dark mode button
  3. +1 ủng hộ.
    1. 🤣🤣😐 ghê khum
    2. Fix lại tiếng anh r đó bro
    3. Fix như nào thế
  4. M lại đua của weddy code đi
    1. Kkk
  5. Đã fix tiếng Anh rồi ạ
  6. xịn xò
    1. 10 điểm ><
  7. :))
    1. :))
  8. Anh mua median 1.5 đấy à ?
    1. Mua ko tui bán
    2. Deo :V
  9. tốt mà mìk hk bên mảng blog nên hog có dùng :D
    1. K phải blog cũng dùng được á
  10. ok thanks for the info
    1. Thank you
  11. Google night
  12. i am unable to do it can you help through picture /screenshot in mail pk2486527@gmail.com
    1. Ok bro
    2. Bro i did not get your mail
      Can you send it once more
      Pk2486527@gmail.com