Hê lô mọi người, hôm nay rảnh viết bài cho mọi người xem nè. Hôm nay mình sẽ Hướng dẫn mọi người cài cái widget mắt xem như mình cho template Median UI v1.7 này nhé. Ok let's go thôi.

Xàm lìn chém gió

Sau bao nhiêu ngày tháng lặn lội dưới biển cả để thu thập thông tin kiếm content thì mình nhận được một chiếc comment đó là hướng dẫn cách hack mắt xem. Nguyên văn comment như sau

Sau khi bạn này comment như vạy mình đã rep lại bạn ấy liên hệ với mình qua Fanpage, mình cũng ghé qua Blog của bạn ấy để comment nhưng do xung đột gì đó Blog bạn ấy bị lỗi 🙁, nên mình viết bài này hướng dẫn các bạn luôn.

Hướng dẫn

Cài tiện ích

1. Đầu tiên, như các bài viết hướng dẫn khác, đăng nhập vào Blog muốn cài đặt (Sử dụng template median mọi phiên bản, còn Plus UI đã cài sẵn chỉ cần đọc trong tài liệu của tác giả là có)
2. Sau đó bạn vào mục Chủ đề, sau đó chọn vào nút mũi tên và nhấn vào Chỉnh sửa HTML
3. Dán mã sau vào thẻ ]]></b:skin> hoặc một số theme sử dụng <style/>

     /* Tiện ích hiển thị số lượt khách truy cập */
   .separator{position:relative}
   .view-post.hidden{display:none}
   .view-post.psVcActive{position:absolute;top:10px;right:5px;opacity:.8;font-size:14px;}
   .view-post{display:flex;align-items:center;margin:0 5px;padding:1px 5px;gap:3px;border-radius:12px;color:#0e2045!important;background-color:#fffdfc!important;box-shadow:5px 5px 15px 0 rgb(0 0 0 / 10%)}
   .view-post:before{content:attr(data-text);text-indent:2px;opacity:.8}
   .view-post svg{fill:none!important;stroke:#0e2045!important;stroke-linecap:round;stroke-linejoin:round; stroke-width:1;width:16px;height:16px;opacity:.8}
     

4. Tiếp đến bạn dán mã Javascript sau vào thẻ </body> hoặc &lt;!--</body>--&gt;&lt;/body&gt;

     <script>/*<![CDATA[*/
   const ViewCountFbase = {
     firebaseUrl: 'https://bo-dem-blog-default-rtdb.firebaseio.com/',
     abbreviation: '1', // 0 hoặc 1 hoặc 2
     type: '1', // 0 hoặc 1
     sharedBy: 'www.wendycode.com' // credit
   };
     
   function viewCountLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.wendycode.com/blogger/widget/viewcount.js';document.body.appendChild(script)}function vcDtcLzy(){viewCountLoad(),localStorage.setItem("viewCountJs","true")}var wcLdStorage=localStorage.getItem("viewCountJs");if("true"!=wcLdStorage){var t=!1,e=!1;window.addEventListener("scroll",()=>{(0!=document.documentElement.scrollTop&&!1===t||0!=document.body.scrollTop&&!1===t)&&(vcDtcLzy(),t=!0,e=!0)},!0),window.addEventListener("click",()=>{!1===e&&!1===e&&(vcDtcLzy(),e=!0,t=!0)},!0)}"true"===wcLdStorage&&viewCountLoad();"undefined"!= typeof infinite_scroll&&infinite_scroll.on("load",function(){viewCountLoad();});
   /*]]>*/</script>
     

   Ghi chú
   - firebaseUrl: url cơ sở dữ liệu thời gian thực firebase của bạn hoặc để nó sử dụng cơ sở dữ liệu của mình
   - abbreviation: điền 0 hoặc 1 hoặc 2 , bạn sẽ thấy sự khác biệt nếu số lượt xem đạt trên 1000
   - :type điền 0 thì số lượt xem sẽ không tăng khi trang resh

5. Đặt mã này vào nơi bạn muốn hiển thị bộ đếm khách truy cập. Bạn phải có khả năng hoặc hiểu cách kiểm tra các phần tử để có thể đặt mã này vào vị trí thích hợp, vì mỗi mẫu có một mã khác nhau nên bạn phải tự điều chỉnh phần này.

   Nếu bạn sử dụng Median UI v1.7 thì đặt nó vào bên dưới <div class='bar flexIn'>, có 4 mã, bạn đặt vào từng cái nhé

   <div class='view-post hidden' expr:data-view='data:blog.blogId + &quot;/&quot; + data:post.id + &quot;/viewpost&quot;' expr:view-ispost='data:view.isPost ? &quot;true&quot; : &quot;false&quot;'><svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(2.000000, 4.000000)'><path d='M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z'/><path d='M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z'/></g></svg></div>
     

   Tùy chọn khác
   Nếu bạn bối rối về việc đặt mã ở trên, bạn có thể sử dụng mã này. Nếu bạn muốn kích hoạt bộ đếm khách truy cập trong hình thu nhỏ trên một bài viết, bạn chỉ cần đặt mã này bên dưới mã <data:post.body/> Median UI 1.7, có thể đặt nó bên dưới mã<b:include data='post' name='postBody'/>

   <b:if cond='data:view.isPost and !data:view.isPage'>
   <script>
   var wcVcThumbActive = {
     id: '<data:blog.blogId/>/<data:post.id/>/viewpost',
     selector: '.separator'
   }
   </script>
   </b:if>
     

   '.separator' Cái này mình đánh dấu có nghĩa là thẻ bao bọc hình ảnh của bạn khi đăng bài, hãy thay đổi nó bằng một cái tên dễ nhớ.

   Nó như thế này

   <div class="separator"><img alt="title" src="https://blogger.googleusercontent.com/img/b/xxxxxx.jpg" title="title" /></div>
     

Cài cơ sở dữ liệu Firebase

Để lấy link này https://bo-dem-blog-default-rtdb.firebaseio.com/ bạn phải tạo một cơ sở dữ liệu. Nó được tạo ở Firebase của Google

Nếu bạn lười hoặc không muốn gặp rắc rối thì có thể sử dụng cơ sở dữ liệu của mình, nhưng sử dụng cơ sở dữ liệu của riêng bạn sẽ tốt hơn vì phiên bản Firebase miễn phí có giới hạn, bạn có thể đọc về nó tại đây

Nếu có nhiều người sử dụng cơ sở dữ liệu của mình và nó có giới hạn cũng như tiện ích không hoạt động thì bạn nên tạo cơ sở dữ liệu của riêng mình sẽ phù hợp hơn.

1. Mở bảng điều khiển Firebase tại đây
2. Chọn một dự án bạn muốn hoặc tạo mới
3. Nếu tạo mới, bạn chọn Add Project, xong đó đặt tên rồi nhấn , Tiếp tục lại nhấn Continue, Cuối cùng chọn tài khoản Google Analytics rồi lại nhấn Continue là xong.
4. Ở trang chủ project của bạn mới tạo bạn nhấn vào Realtime Database, rồi nhấp vào quy tắc, thay tất cả mã cũ thành mã này vào đó rồi lưu lại

   {
     "rules": {
       ".read": "true",
       ".write": "true",
     }
   }
     

5. Link firebase là link ở thẻ data khi bạn thay code trên xong quay trở lại thẻ data

Ok vậy là xong

Hướng dẫn Buff mắt nhìn ngầu hơn

Khi bạn cài xong bạn thấy lượt sem cứ lẹt đẹt nhìn không đẹp, mà tiện ích này hoạt động khi bạn refresh trang, bạn không tìm thấy bot tìm thấy làm việc đó, bạn cũng có thể làm việc đó thủ công nhưng bạn không có thời gian rảnh làm việc đó. Đừng lo, mình đã tìm tòi và đã buff được nó. Sau đây là hướng dẫn

Mình dài dòng cho cái bài viết liên quan nó nhảy thôi còn cách hack thì Đăng kí vip để xem hướng dẫn :))

Lời kết

Vậy là mình đã hướng dẫn xong các bạn cài mắt rồi. Nếu thấy hay hãy chia sẻ, để lại comment và thả cảm xúc để mình biết nhé. Tim

Code có lỗi, xin đừng gạch đá vì mình chưa muốn xây nhà, hãy bình luận để mình sửa thế là được rồi 💩😊