Đưa bộ đếm lượt xem bài đăng theo thời gian thực vào Blogger/Blogspot

Nếu bạn muốn theo dõi các bài viết của mình hoặc bạn muốn biết trang web của mình có ai tương tác với nó hay không? Cách đơn giản nhất là tích hợp bài viết với tính năng kiểm tra lượt xem, như vậy bạn sẽ dễ dàng biết được số lượt xem trên mỗi bài blog trên website blogger của mình. Sử dụng tính năng này, người đọc có thể xác định chất lượng của bài viết nhờ vào số lượt xem và họ sẽ cảm thấy yên tâm hơn và muốn click vào bài blog để đọc khi số lượt xem nhiều hơn những bài khác. Vì vậy, trong bài viết này, mình sẽ hướng dẫn các bạn cách đếm lượt xem bài viết trong blogger.

Đưa bộ đếm lượt xem bài đăng theo thời gian thực vào Blogger/Blogspot

Tạo tài khoản Firebase của bạn

Sau đó, tạo APPS Firebase

* Để tạo APPS Firebase của bạn, hãy truy cập irebase.com/signup

Nhấp vào nút Tạo dự án .

Nhập Tên dự án của bạn (Bạn có thể nhập tên trang web của bạn làm tên dự án của bạn ).

Chấp nhận Điều khoản Firebase . Sau đó, nhấp vào nút Tiếp tục .

Bấm vào nút Tiếp tục .

Chấp nhận các Điều khoản của Google Analytics . Sau đó, nhấp vào nút Tạo dự án . Firebase sẽ tạo dự án của bạn

Khi dự án của bạn đã sẵn sàng, hãy nhấp vào nút Tiếp tục .

Nhấp vào menu Xây dựng ở phía bên trái.

Bấm vào nút menu Cơ sở dữ liệu thời gian thực .

Để lưu trữ và đồng bộ dữ liệu trong thời gian thực, bạn phải tạo cơ sở dữ liệu thời gian thực . Nhấp vào nút Tạo cơ sở dữ liệu để tạo cơ sở dữ liệu thời gian thực firebase của bạn .

Bây giờ thiết lập Tùy chọn Cơ sở dữ liệu Thời gian thực của bạn Chọn vị trí Cơ sở dữ liệu Thời gian thực của bạn, nơi Cơ sở dữ liệu thời gian thực của bạn sẽ được lưu trữ. Sau đó, nhấp vào Tiếp theo .

Quy tắc bảo mật Chọn Bắt đầu ở chế độ Đã khóa . Sau đó kích hoạt bằng cách nhấp vào nút Bật . Nếu bạn đã xác định cấu trúc dữ liệu của mình , bạn sẽ phải viết các quy tắc để bảo mật dữ liệu của mình.

Đã tạo URL ứng dụng Firebase .

Nhấp vào menu Quy tắc .

Bạn phải thay đổi các quy tắc đọc và ghi .

Thay đổi quy tắc đọc và ghi : false thành true .

Sau đó, Xuất bản các quy tắc thay đổi .

* Đừng quên sao chép URL ứng dụng Firebase của bạn . Quay lại Blogger

Hướng dẫn Thêm Bộ đếm Lượt xem Bài đăng trong Blogger

Nếu bạn muốn bật tính năng này trên Blog của mình, hãy làm theo các bước đơn giản sau để bắt đầu.

Lưu ý
rằng nó sẽ không hoạt động trong các phiên bản Plus UI cũ hơn. Đảm bảo rằng bạn nhận được bản cập nhật mẫu mới nhất.

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ã ]]></head> và dán các Mã CSS sau ngay trên vào nó.

<!--[ Post Views Counter Css ]-->
<style>
/*<![CDATA[*/
.views-counter{display:flex;justify-content:space-between;position:relative;font-family:inherit;font-size:13px;padding-top:9px;padding-bottom:20px;color:#08102b;-webkit-font-smoothing:antialiased}
.views-counter >*{padding:12px;background:#fffdfc;box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:6px;display:flex;align-items:center;justify-content:center}
.views-counter span:nth-child(2){margin-right:3px}
.views-counter svg.line{fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:18px;height:18px;margin-right:4px}
.views-counter svg.line .svgC{fill:none;stroke:#482dff}
/*]]>*/
</style>

Bước 6: Sao chép mã Html bên dưới và sau đó dán nó trước <data:post.body/>

<!--[ Post Views Counter ]-->
<div class="views-counter">
<span><svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path class="svgC" 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><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"></path></g></svg><span expr:data-id="data:post.id" id="viewscount"></span>Views</span>
</div>

Bước 7:Sao chép mã JavaScript bên dưới và sau đó dán nó trước </body>

<!--[ Post Views Counter]-->
<script src="https://cdn.jsdelivr.net/gh/smarttechmukesh/assets@main/javascript/jquery_3.2.1.min.js"></script>
<script>
//<![CDATA[
javascript('views_counter');
//]]>
</script>

Cuối cùng, Đừng Quên Nhấp vào Lưu Chủ đề Và Sau đó Xem Kết quả .

Sự kết luận :

Đây là một cách dễ dàng để tạo bộ đếm lượt xem bài đăng trong blogger với firebase mà bạn có thể sử dụng trong trang web blogger của mình hoặc bất kỳ dự án thiết kế web nào.

Trong bài viết này, tôi đã chia sẻ cách thêm bộ đếm lượt xem bài viết trong blogger. Tôi hy vọng cách tạo bộ đếm lượt xem bài viết trong blogger này có thể rất hữu ích cho bạn và blog của bạn. Cảm ơn bạn đã ghé thăm trang web mới của chúng tôi, iTeam OS.

Truy cập Bypass Google Account APK để tải file APK nhé