Tiện ích lượt xem bài bài viết theo thời gian thực trên Blogger

Việc thêm lượt xem bài bài viết theo thời gian thực trên Blogger sẽ không yêu cầu nhiều kiến thức về HTML, CSS hoặc JS vì tôi đã thiết kế sẵn cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng vị trí trong XML Chủ đề Blogger của bạn.

Tiện ích lượt xem bài bài viết theo thời gian thực trên Blogger

Tạo cơ sở dữ liệu và thêm quy tắc

Bạn hãy đọc bài viết tạo giấy phép với cơ sở dữ liệu thời gian thực Firebase để xem hướng dẫn chi tiết nhé!

Thêm tiện ích lượt xem bài bài viết Blogger

Chú ý
Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ, nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> hoặc </style> và dán các mã CSS sau ngay trên vào nó.

/* Visitor counter shared by Giahuy.net */
.separator{position:relative}
.giahuy-view-post.hidden{display:none}
.giahuy-view-post.psVcActive{position:absolute;top:10px;right:5px;opacity:.8;font-size:14px;}
.giahuy-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%)}
.giahuy-view-post:before{content:attr(data-text);text-indent:2px;opacity:.8}
.giahuy-view-post svg{fill:none!important;stroke:#0e2045!important;stroke-linecap:round;stroke-linejoin:round; stroke-width:1;width:16px;height:16px;opacity:.8}

Bước 6: Tiếp tục hãy thêm Script sau ngay bên trên vào thẻ </body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp </body>.

<script>/*<![CDATA[*/
const ghViewCount = {
  firebaseUrl: 'https://giahuy-default-rtdb.firebaseio.com/',
  abbreviation: '1', // 0 or 1 or 2
  type: '1', // 0 or 1
  sharedBy: 'www.giahuy.net' // Credit do not removed
};
  
function vieghountLoad(){var script=document.createElement('script');script.async= true;script.src='https://cdn.giahuy.net/widget/js/viewcount.min.js';document.body.appendChild(script)}function vcDtcLzy(){vieghountLoad(),localStorage.setItem("vieghountJs","true")}var ghLdStorage=localStorage.getItem("vieghountJs");if("true"!=ghLdStorage){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"===ghLdStorage&&vieghountLoad();"undefined"!= typeof infinite_scroll&&infinite_scroll.on("load",function(){vieghountLoad();});
/*]]>*/</script>

Bước 8: Bây giờ hãy thêm các mã HTML sau vào vị trí bạn muốn hiển thị trong Blog.

Nếu bạn sử dụng mẫu Median UI 1.7, bạn có thể đặt mã bên dưới <div class='bar flexIn'> Có 4 mã như vậy bạn có thể bỏ qua từng mã.

<div class='giahuy-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>

Nếu bạn bối rối về việc đặt mã hóa ở trên, bạn chỉ cần đặt mã này bên dưới mã: <data:post.body/>. Theme 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 ghVcThumbActive = {
  id: '<data:blog.blogId/>/<data:post.id/>/viewpost',
  selector: '.separator'
}
</script>
</b:if>

Bước 8: Lưu các thay đổi bằng cách nhấp vào biểu tượng này .

Chú ý:
Phần tôi đã đánh dấu .separator là bộ chọn bao bọc cho các hình ảnh thu nhỏ được đăng ký, hãy đảm bảo bài viết hình thu nhỏ đầu tiên được viết như thế này.

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

Trên đây là hướng dẫn tiện ích lượt xem bài bài viết theo thời gian thực trên Blogger.
Nếu có bất cứ thắc mắc nào hãy comment ngay phía dưới cho mình biết nhé!