Tiện ích đếm lượt xem bài viết Realtime cho Blogger

Bạn đang tìm kiếm một tiện ích đếm lượt xem bài viết đơn giản nhưng chính xác và hiển thị đẹp mắt cho trang Blogspot của mình? Tiện ích Realtime View Counter by GiaHuy.Net chính là giải pháp tối ưu!

Tiện ích tự động kết nối đến Firebase và ghi lại số lượt xem mỗi khi người dùng truy cập bài viết. Dữ liệu được lưu trữ và cập nhật trực tiếp, đảm bảo mỗi view là duy nhất và đáng tin cậy.

Tiện ích đếm lượt xem bài viết Realtime cho Blogger

Để xem demo các bạn hãy bấm vào nút bên dưới nhé, OK, các bạn nào muốn dùng thử thì cùng xem cách thực hiện nhé.

Tính năng nổi bật

Tự động đếm lượt xem mỗi bài viết một cách chính xác và realtime.
Hiển thị đẹp, tinh gọn: “👁 1.2K views”, hỗ trợ cả giao diện sáng và tối.
Không cần đăng nhập, không cần chỉnh sửa template phức tạp.
Tối ưu hiệu suất: chỉ tải khi cần (lazy load), tương thích mọi giao diện.
Bảo vệ dữ liệu với Firebase Realtime Database, có kiểm soát chặt chẽ.

Tạo cơ sở dữ liệu thời gian thực mới

Bạn có thể muốn đọc bài viết này:

Hãy thêm quy tắc trong cơ sở dữ liệu thời gian thực Cấu hình Firebase Realtime Database rules như sau:

Nếu bạn chưa biết cách làm 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é!

{
  "rules": {
    ".read": true,
    "ghViews": {
      "$blog": {
        "$post": {
          ".write": "newData.isNumber() && (data.exists() ? newData.val() === data.val() + 1 : newData.val() === 1)"
        }
      }
    }
  }
}

Tiện ích đếm lượt xem bài viết Realtime cho Blogger

Lưu ý: Tiện ích này chỉ dành cho nền tảng Blogger/Blogspot.

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ó.

/*! Realtime Post View Counter by GiaHuy.Net */
.ghVc{display:inline-flex;align-items:center;background:#fff;padding:4px 10px;border-radius:10px;box-shadow:0 0 25px rgba(0,0,0,.02);color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.ghVc[data-view]{visibility:visible;opacity:1}
.ghVc > svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:5px}
.ghVc::after{content:attr(data-view) ' views'}
.drK .ghVc{background:#252526;color:#fff}

Bước 6: 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.

<!-- Realtime Post View Counter by GiaHuy.Net -->
<span class='ghViews' data-incr='true' expr:data-path='"ghViews/BLOG_" + data:blog.blogId + "/POST_" + data:post.id'>
  <svg class='line' viewBox='0 0 24 24'><path d='M15.58 12C15.58 13.98 13.98 15.58 12 15.58C10.02 15.58 8.42004 13.98 8.42004 12C8.42004 10.02 10.02 8.42004 12 8.42004C13.98 8.42004 15.58 10.02 15.58 12Z'></path><path d='M12 20.27C15.53 20.27 18.82 18.19 21.11 14.59C22.01 13.18 22.01 10.81 21.11 9.39997C18.82 5.79997 15.53 3.71997 12 3.71997C8.46997 3.71997 5.17997 5.79997 2.88997 9.39997C1.98997 10.81 1.98997 13.18 2.88997 14.59C5.17997 18.19 8.46997 20.27 12 20.27Z'></path></svg>
</span>

Bạn có thể thay thế true bằng false, để nó chỉ hiển thị lượt xem và không tăng (+1). Ví dụ: bạn có thể sử dụng nó để hiển thị lượt xem các bài đăng trên trang chủ.

Bước 7: Tiếp tục hãy thêm JavaScript 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[*/
var ghViews = {
  firebaseUrl: 'https://giahuy-default-rtdb.firebaseio.com/',
  abbreviation: true,
  lazyload: true,
  sharedBy: 'www.giahuy.net' // Credit do not removed
};

function viewLoad(){var script=document.createElement('script');script.async=true;script.src='https://cdn.giahuy.net/widget/js/viewcount.min.js';document.body.appendChild(script)}(function(){if(localStorage.getItem("ViewsJs")!=="true"){let t=false;window.addEventListener("scroll",()=>{if(!t){viewLoad();localStorage.setItem("ViewsJs","true");t=true}},true);window.addEventListener("click",()=>{if(!t){viewLoad();localStorage.setItem("ViewsJs","true");t=true}},true)}else viewLoad()})();
/*]]>*/
</script>

Đánh dấu	Thông tin
`databaseUrl:`	Url của Realtime Database trong Firebase.
`abbreviation:`	Rút gọn số lượng hiển thị theo đơn vị `true` hoặc `false`.
`lazyload:`	Kích hoạt chế độ tải trễ (lazy load) `true` hoặc `false`.

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

Trên đây là hướng dẫn iện ích đếm lượt xem bài viết Realtime cho 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é.
Chúc các bạn thành công và có một ngày làm việc thật hiệu quả!