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é.
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:'vi',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
</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:'vi',includedLanguages:'en,id,vi,zh-CN,th,ru,ms,ko,ja,it,hi,fr,es,de,ar,tr,jw,sn',layout:google.translate.TranslateElement.InlineLayout.SIMPLE},'google_translate_element')}$(".hover").mouseleave(function (){$(this).removeClass("hover")});
</script>Các bạn cấu hình như sau:
- pageLanguage:'id' - 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é.