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é.

———————————–


Leave a Reply