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.
|
| Thêm 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
Đầu tiên, chúng ta cần Tạo một Dự án Firebase để thiết lập cơ sở dữ liệu thời gian thực trong Firebase. Chúng tôi có thể Lưu trữ và Đồng bộ hóa Dữ liệu trong thời gian thực với cơ sở dữ liệu thời gian thực.
Để tạo Dự án Firebase và cơ sở dữ liệu thời gian thực, hãy làm theo các bước sau:
Tạo dự án trong Firebase
Bước 1: Truy cập Firebase Console.
Bước 2: Nhấp vào Create a Project và Enter Project Name, chấp nhận tất cả các điều khoản và Tiếp tục.
Bước 3: Bật và định cấu hình Google Analytics mặc dù bạn có thể tắt Google Analytics cho Dự án này, hãy bỏ qua bước này và nhấp vào Tạo dự án.
Xong! Bạn đã tạo thành công Dự án trong Firebase. Bây giờ chúng ta cần thiết lập Cơ sở dữ liệu thời gian thực trong Dự án này.
Thiết lập và cấu hình cơ sở dữ liệu
Bước 1: Đi tới Firebase Console và Chọn Dự án của bạn.
Bước 2: Đi tới Realtime Database trong menu Xây dựng.
Bước 3: Nhấp vào Create Database, Chọn vị trí ưa thích và nhấp vào Tiếp theo.
Bước 4: Chọn Locked Mode và nhấp vào Bật.
Xong! Bạn đã tạo thành công cơ sở dữ liệu thời gian thực, bây giờ hãy sao chép URL cơ sở dữ liệu bên dưới và dán nó vào nơi nào đó nó sẽ được sử dụng trong thiết lập HTML chủ đề.
Thêm quy tắc vào cơ sở dữ liệu
Bước 5: Bây giờ, nhấp vào Rules và dán các mã sau sau khi thay thế các phần được đánh dấu bằng ID Blog của bạn.
Đối với 1 blog:
{
"rules": {
".read": true,
"BLOG_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"
}
}
}
}
Đối với nhiều blog:
{
"rules": {
".read": true,
"BLOG_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"
}
},
"BLOG_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"
}
},
"BLOG_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"
}
}
}
}
Đừng quên thay thế được đánh dấu Blog ID bằng của bạn Blog ID.
Bước 6: Nhấp vào Xuất bản sau khi thực hiện tất cả các thay đổi như hình bên dưới.
Thêm vào 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> và dán các mã CSS sau ngay trên vào nó.
Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, bạn có thể tùy chỉnh các mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp đã đánh dấu bằng lớp chế độ tối mẫu của mình.
/*! Realtime Post View Counter by GiaHuy.Net */
.pVw{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}
.pVw[data-view]{visibility:visible;opacity:1}
.pVw >svg{width:18px;height:18px;fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;margin-right:5px}
.pVw >svg .a{stroke:#204ecf}
.pVw::after{content:attr(data-view) ' views'}
.drK .pVw{background:#252526;color:#fff}
.drK .pVw >svg{stroke:#fff}
.drK .pVw >svg .a{stroke:#41b375}
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.
<span class='GH_vw pVw' data-incr='true' expr:data-path='"BLOG_" + data:blog.blogId + "/POST_" + data:post.id'> <svg class='line' viewBox='0 0 24 24'><path d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/><circle class='a' cx='12' cy='12' r='3'/></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[*/
(() => {
const config = {
databaseUrl: 'https://....firebaseio.com/',
abbreviation: true,
lazyload: true,
};
const loadJs=(r,e,n,t)=>{const u=document.createElement('script');e&&(u.id=e),(u.async=n),(u.src=r),t&&(u.onload=t),document.getElementsByTagName('head')[0].appendChild(u)},abvr=(r)=>{var e=Math.sign(Number(r));return 1e9<=Math.abs(Number(r))?e*(Math.abs(Number(r))/1e9).toFixed(2)+'B':1e6<=Math.abs(Number(r))?e*(Math.abs(Number(r))/1e6).toFixed(2)+'M':1e3<=Math.abs(Number(r))?e*(Math.abs(Number(r))/1e3).toFixed(2)+'K':Math.abs(Number(r))},postVw=()=>{loadJs('https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js','fb-app',!0,()=>{loadJs('https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js','fb-db',!0,()=>{if(config.databaseUrl){var e={};e.databaseURL=config.databaseUrl;const a=firebase.initializeApp(e,'Realtime Post View Counter by GiaHuy');for(var n=document.querySelectorAll('.GH_vw'),t=a.database(),o=0;o<n.length;o++){var u=(n=n[o]).getAttribute('data-path');(u=t.ref(u)).once('value',(function(n,t){return function(r){0<(r=r.exists()?r.val():0)&&(n.setAttribute('data-view',config.abbreviation?abvr(r):r),n.classList.remove('hidden')),'true'==n.getAttribute('data-incr')&&(n.setAttribute('data-incr',!1),(r=parseInt(r)+1),t.set(r))}})(n,u))}}})})};(()=>{if(!0===config.lazyload){var arLz=[],arSc=[];const da=()=>{0==arLz.length&&null==localStorage.getItem('LZ_VIEW')&&(localStorage.setItem('LZ_VIEW',1),postVw())};window.addEventListener('scroll',(r)=>{((0!=document.documentElement.scrollTop&&0==arSc.length)||(0!=document.body.scrollTop&&0==arSc.length))&&da()},!0),document.getElementsByTagName('body')[0].addEventListener('click',(r)=>{da()}),localStorage.getItem('LZ_VIEW')&&postVw()}else postVw()})()})()
/*]]>*/</script>
Thay thế các phần được đánh dấu, tức là:
- URL Cơ sở dữ liệu thời gian thực trong
databaseUrlkhóa. truehoặcfalsetrongabbreviationchìa khóa.truehoặcfalse(khuyến nghịtrue) tronglazyloadkhóa.
Bước 8: 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 thêm 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é.
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ả!