Tiện ích hộp download đếm lượt tải bằng Firebase Blogger

Bạn đang tìm một tiện ích tải file chuyên nghiệp cho Blogspot, có khả năng đếm số lượt tải? Dưới đây là giải pháp tối ưu giúp bạn hiển thị nút tải file với giao diện đẹp, hỗ trợ đếm số lần tải bằng Firebase Realtime Database. Tiện ích này hoạt động mượt mà, tích hợp tốt với mọi blog cá nhân, chia sẻ tài nguyên hoặc blog thủ thuật.

Một lần nữa, tôi đã tạo tiện ích này bằng cách sử dụng api từ Firebase, trong bài đăng trước tôi đã tạo tiện ích lượt xem bài bài viết theo thời gian thực trên Blogger và tiện ích like bài viết trên Blogger.

Tiện ích hộp download đếm lượt tải bằng Firebase Blogger

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

Hiển thị nút tải file đẹp mắt, có biểu tượng và mô tả file.
Tự động đếm số lượt tải thông qua Firebase, giúp bạn theo dõi mức độ quan tâm.
Tối ưu tải nhanh: Chỉ nạp script xử lý khi người dùng bắt đầu cuộn hoặc tương tác (lazy load).
Tương thích Blogger và có thể nhúng nhiều nút tải cho nhiều bài viết khác nhau.

Để 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ạ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,
    "ghDownloads": {
      "$blog_id": {
        "$post_file": {
          ".write": "newData.isNumber() && (data.exists() ? newData.val() === data.val() + 1 : newData.val() === 1)"
        }
      }
    }
  }
}

Tiện ích hộp download đếm lượt tải bằng Firebase 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 */
.ghBox{display:flex;align-items:center;max-width:500px;margin-block:1.6em;border:1px solid rgba(0,0,0,0.1);padding:0.8rem;border-radius:7px}
.ghBox:hover{box-shadow:0 15px 50px -20px rgb(0 0 0 / 20%)}
.ghBox .fT{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:42px;height:42px;background-color:rgb(152 155 159 / 20%);border-radius:7px}
.ghBox .fT::before{content:attr(data-text);opacity:.8}
.ghBox .button{flex-shrink:0;margin:0;padding:10px 12px;font-size:small}
.ghBox .button::after{content:attr(aria-label)}
.ghBox .fN{flex-grow:1;width:calc(100% - 200px);padding:0 15px}
.ghBox .fN >*{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ghBox .fS{line-height:1.5;font-size:small;opacity:.8}
.button{display:inline-flex;align-items:center;column-gap:8px;border:0;border-radius:7px;background-color:#ce2c90;font:1rem/1.5 var(--fontBody);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.ghBox .button svg{stroke:white!important;fill:none!important}

Bước 6: 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 ghDownloads = {
  firebaseUrl: 'https://giahuy-default-rtdb.firebaseio.com/',
  sharedBy: 'www.giahuy.net' // Credit do not removed
};

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

Ghi chú:
firebaseUrl: Điền URL cơ sở dữ liệu thời gian thực firebase của bạn.

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

Cách viết bài hộp download đếm lượt tải trên Blogger

Bước 1: Trên bảng điều khiển Blogger, nhấp vào Trang, tạo 'BÀI ĐĂNG MỚI'.
Tiếp tục nhấp vào 'Chế độ xem HTML'. Sau đó sao chép mã từ tập lệnh bên dưới và dán nó vào đó.

<!-- Nút tải file -->
<div class='ghBox'>
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <span>file_name.zip</span>
    <span class='fS'>200kb | <span class='dlCount'>Đang tải...</span></span>
  </div>
  <a class='button download'
     data-file='file_name.zip'
     data-link='#'
     aria-label='Tải về'>
    <svg class='line' viewBox='0 0 24 24'><path d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z'></path><path d='M12 8.5V14.5'></path><path d='M9 12.5L12 15.5L15 12.5'></path></svg>
  </a>
</div>

Đánh dấu	Thông tin
`zip`	Đuôi file
`file_name.zip`	Tên file
`200kb`	Dung lượng file
`#`	Link download

Bước 2: Cuối cùng Xuất bài viết bằng cách nhấp vào Xuất bản.

Trên đây là hướng dẫn tiện ích hộp download đếm lượt tải bằng Firebase 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é!