Hướng Dẫn Thêm Tiện Ích Google Dịch Vào Blogger

Thêm Tiện Ích Google Dịch Vào Blogger – Blog là một môi truờng lớn, với lượng Viewer có thể đến từ khắp mọi nời, vì vậy việc ngôn ngữ phù hợp với từng Viewer là vô cùng quan trọng, nó quyết định việc giữ chân Viewer ở lại Website của chúng ta.

Hướng Dẫn Thêm Tiện Ích Google Dịch Vào Blogger

Bước 1: Chúng ta truy cập vào Blogger

Bước 2: Vào phần Chủ đề và chọn chỉnh sửa HTML

Bước 3: Tìm thẻ ]]></b:skin> và dán đoạn Code sau vào

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

Chú ý: Các bản chỉnh “margin-right:5px;margin-top:15px” sao cho phù hợp với Blog của các bạn nhé

Bước 4: Đây là bước các bạn thêm Google Dịch vào nơi bạn muốn hiển thị
Các bạn chèn đoạn mã sau:

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

Ở bước tiếp theo các bạn có thể lựa chọn một trong 2 loại: Javascript Trì Hoãn và Javascript Lazy

Bước 5: Các bạn tiếp tục thêm đoạn Code sau trước thẻ đóng </body>.

Javascript Delay:

<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://kenbtec.github.io/translatewebsite/f4.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

<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://kenbtec.github.io/translatewebsite/f4.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>

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.