Hallo chào mừng bạn đã quay lại với blog của tôi.
Hôm nay tôi mang tới cho bạn một tiện ích rất hay cho Blogger, đó là Google Translate (Google dịch). Nếu như blog của bạn có nhiều lượt tương tác từ nước ngoài thì tiện ích là một công cụ rất chi là hữu hiệu nhé, nó sẽ giúp cho người đọc có thể chuyển qua ngôn ngữ của họ để có thể hiểu được nội dung của blog bạn hơn.
Nào chúng ta bắt tay vào làm thôi
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/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 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/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ó thể 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 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:
blog.choipanwendy.com/