Thêm tiện ích Google dịch vào Blogger

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

Lưu chủ đề và xem kết quả nhé.

-----------------------------------

Nguồn: Nguyễn Lâm Blog