Đăng ký kênh Youtube

Cách Thêm Lượt Xem Bài Viết Cho Template Plus UI

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated
realtime post views plus ui
Thêm lượt xem bài viết cho Template Plus UI

Trong bài viết này mình sẽ hướng dẫn các bạn cách hiển thị số lượt xem bài viết cho Plus UI template. Việc thêm lượt xem bài viết cho blog sẽ giúp cho bạn nắm bắt được tình hình tương tác của bài viết. Và bây giờ chúng ta cùng tìm hiểu cách để hiển thị lượt xem (realtime views counter) cho Plus UI nhé.


Các bước thực hiện

Bước 1: Truy cập vào Firebase Console để tạo một dự án trong Firebase.

tạo dự án trong firebase console
Tạo dự án trong firebase console

Bạn nhập tên của dự án và tick chọn vào các ô giống hình.

dùng firebase để hiển thị lượt xem bài viết
Dùng firebase để hiển thị lượt xem bài viết
tạo dự án trong firebase để hiển thị lượt xem
Tạo dự án trong firebase để hiển thị lượt xem

Bước 2: Tạo cơ sở dữ liệu cho dự án

Bạn chọn mục Build, sau đó chọn vào Realtime Database

tạo cơ sở dữ liệu cho realtime views vounter
Tạo cơ sở dữ liệu cho realtime views vounter

Bước 3: Nhấp vào Creat Database, tiếp tục ấn Next, sau đó ấn Enable

hiển thị realtime post view
Hiển thị realtime post view

Bước 4: Sau khi tạo xong, bạn qua phần Rules và dán đoạn js bên dưới vào

hiển thị số lượt xem bài viết
Hiển thị số lượt xem bài viết

Nếu sử dụng cho một blog, bạn sử dụng đoạn js này:

  {
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Nếu sử dụng cho nhiều blog, bạn sử dụng đoạn js này:

  {
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    },
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    },
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Bạn chỉ việc thay ID blog vào và ấn Publish là xong

Tiến hành publish để hiển thị lượt xem bài viết

Bước 5: Tiếp theo bạn vào tùy chỉnh HTML của Blogger và tìm đến đoạn

realViews: {
  databaseUrl: "",
  abbreviation: "false"
}

Tiếp theo sao chép link bên firebase

thêm lượt xem bài viết template plus ui
Thêm lượt xem bài viết template plus ui

Sau đó dán vào vị trí mình đánh dấu là được.

tạo hiển thị lượt xem bài viết cho template plus ui blogger
Tạo hiển thị lượt xem bài viết cho template plus ui blogger

Bạn ấn lưu và xem kết quả.

Kết luận

Trên đây là cách thêm lượt xem bài viết cho Template Plus UI Blogger vô cùng đơn giản. Nếu bạn có bất kỳ câu hỏi hoặc khiếu nại về bản quyền, hãy để lại ý kiến của bạn bên dưới để mình biết. Chúc bạn có một ngày học tập và làm việc hiệu quả.

1 comment

  1. Hồng Khôi Art
    This comment has been removed by the author.
➥ Gửi kèm ảnh chụp màn hình để được hỗ trợ tốt nhất. Bạn hãy dán link ảnh vào khung bình luận và ấn xuất bản, ảnh sẽ được tự động tải lên.
➥ Bạn có thể Upload Ảnh bất kì để lấy link và dán vào khung bình luận và ấn xuất bản ảnh sẽ được tải lên.
➥ Không spam trong khung bình luận, hạn chế viết tắt.
➥Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.