Bạn có các câu hỏi ? Liên hệ với chúng tôi Messenger !

Cách tạo bộ đếm lượt xem bài đăng theo thời gian thực bằng Vanilla JS

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Làm cách nào để thêm Bộ đếm lượt xem bài viết theo thời gian thực?

Việc thêm Bộ đếm lượt xem bài đăng theo thời gian thực vào Trang web 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.

bài đăng thời gian thực trong blogger vani js

Chúng ta hãy xem bản demo của nó.

Tạo cơ sở dữ liệu thời gian thực 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: Đi tớiBảng điều khiển Firebase.

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 thời gian thực

Bước 1: Đi tớiBảng điều khiển Firebase và Chọn Dự án của bạn.

Bước 2: Đi tới Cơ sở dữ liệu thời gian thực trong  menu Xây dựng .

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

Bước 3: Nhấp vào Tạo cơ sở dữ liệu, Chọn vị trí ưa thích và nhấp vào Tiếp theo.

Bước 4: Chọn Chế độ đã khóa và nhấp vào Bật.

cách lấy url cơ sở dữ liệu thời gian thực

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 Quy tắc 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 Blog Đơn :

{
"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 idbằng của bạnBlog id.

Bước 5: 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 quy tắc firebase

Thay đổi HTML chủ đề

Quan trọng!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àoTrang 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 , và 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 House Of Blogger */
.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 Widget.

<!--[ Realtime Post View Counter by House Of Blogger ]-->
<span class='HOB_vw pVw' data-incr='true' expr:data-path='&quot;BLOG_&quot; + data:blog.blogId + &quot;/POST_&quot; + 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 nó bằng false, để nó chỉ hiển thị lượt xem và không tăng (+1) nó. 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: Bây giờ hãy thêm JavaScript</body> sau ngay bên trên vào thẻ. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

<script>/*<![CDATA[*/
/*! Realtime Post View Counter by House Of Blogger */
(() => {
const config = {
databaseUrl: 'https://....firebaseio.com/',
abbreviation: true,
lazyload: true
};
eval(function(p,a,c,k,e,d){while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+c+'\\b','g'),k[c])}}return p}('!14(){24 13=32();14 12(12,13){16 17(13-53,12)}14 15(12,13){16 17(13-89,12)}50(;;)142{33(141==+20(12(140,53))+20(12(139,138))/2*(-20(12(137,136))/3)+-20(15(135,134))/4*(20(15(132,123))/5)+20(12(131,130))/6*(-20(15(129,51))/7)+-20(12(128,127))/8+-20(12(126,125))/9+-20(15(51,143))/10*(-20(12(133,144))/11))157;13.67(13.54())}166(12){13.67(13.54())}}();24 37=(12,13,15,18)=>{14 19(12,13){16 17(13-248,12)}24 21=25[27(-163,-162)](19(259,260));14 27(12,13){16 17(12- -161,13)}13&&(21.160=13),21[27(-159,-158)]=15,21.156=12,18&&(21[27(-146,-155)]=18),25[27(-153,-152)](19(57,151))[0][19(57,149)](21)};14 30(12,13){16 17(13-148,12)}14 38(12,13){16 17(12-78,13)}24 49=12=>{14 13(12,13){16 17(12-229,13)}29 15=22[18(-58,-58)](23(12));14 18(12,13){16 17(12- -145,13)}16 59<=22[18(-35,-122)](23(12))?15*(22[18(-35,-60)](23(12))/59)[18(-56,-60)](2)+"120":61<=22.43(23(12))?15*(22[13(248,245)](23(12))/61)[13(249,224)](2)+"97":62<=22[13(248,244)](23(12))?15*(22.43(23(12))/62)[18(-56,-35)](2)+"94":22[13(248,93)](23(12))};14 32(){29 12=["55","92","91","90","83","88","87",".86","63","85","40-84","98","100","40-99","111","119","118","117","40-115","44","114","65-72","66://68.71.69/70/8.10.1/26-63.64","65-110","101","76","109","108","107","106","168","75","105","104","103","102","167","147","169","186","242","241","240","239","238","237","236","235","74","233","222","231","43","228"];16(32=14(){16 12})()}14 31(){37("66://68.71.69/70/8.10.1/26-72.64",17(42,-28),!0,()=>{14 12(12,13){16 17(12- -234,13)}37(12(-247,-262),12(-263,-261),!0,()=>{55()})})}14 17(12,13){29 15=32();16(17=14(12,13){16 15[12=+12]})(12,13)}33(81[38(256,255)]=14(){14 19(12,13){16 17(12- -254,13)}14 12(12,13){16 17(12-258,13)}33(34[12(52,253)]){33(!26[19(-252,-251)][12(220,193)]){24 13={};13[19(-218,-189)]=34[12(52,187)],26[12(219,185)](13)}50(46 13=25[12(183,182)](12(180,170)),15=26[12(47,47)](),18=0;18<13[19(-177,-176)];18++){46 12=13[18];29 21=12[19(-45,-174)](19(-172,-171)),21=15[19(-190,-181)](21);21[19(-192,-209)]("217",14(18,19){16 14(12){14 13(12,13){16 17(13- -232,12)}14 15(12,13){16 17(13-216,12)}0<(12=12.215()?12.214():0)&&(18.44(15(45,211),34[15(210,208)]?49(12):12),18[13(-173,-196)][15(195,206)]("205")),13(-221,-194)==18[13(-207,-202)](15(203,48))&&(18[15(201,200)](15(198,48),!1),12=20(12)+1,19[13(-204,-191)](12))}}(12,21))}}},!0===34.197){29 82=[],39=[];24 41=()=>{14 12(12,13){16 17(12-199,13)}14 13(12,13){16 17(13- -78,12)}0==82[13(-212,-213)]&&175==36[12(178,179)](13(-79,-184))&&(36[13(-188,-79)](12(257,250),1),31())};81[38(223,246)](30(225,226),12=>{14 13(12,13){16 17(12- -227,13)}(0!=25[13(-73,-230)][13(-80,-112)]&&0==39[13(-77,-113)]||0!=25[13(-116,-73)][13(-80,-95)]&&0==39[13(-77,-96)])&&41()},!0),25.74("75")[0][30(121,150)](30(154,164),12=>{41()}),36[30(165,124)]("76")&&31()}243 31();',10,264,'||||||||||||t|e|function|n|return|_0x4db6|a|r|parseInt|c|Math|Number|const|document|firebase|o||var|_0xaac43c|postVw|_0x20fc|if|config|601|localStorage|loadJs|_0x4cda98|arSc|data|sa||abs|setAttribute|491|let|770|470|abvr|for|341|763|815|shift|hobViews|600|284|602|1e9|581|1e6|1e3|database|js|fb|https|push|www|com|firebasejs|gstatic|app|892|getElementsByTagName|body|LZ_VIEW|918|555|508|891|window|arLz|databaseURL|path|getAttribute|HOB_vw|querySelectorAll|initializeApp|335|length|apps|databaseUrl|272|K|887|938|M|ref|view|once|getItem|48198cjPOCE|56sdHFLl|285442QUeuPh|click|documentElement|scroll|addEventListener|setItem|db|abbreviation|908|926|set|incr|890|true|remove|classList|B|408|614|339|421|823|832|822|840|366|820|843|332|810|338|363|817|793|816|794|839|546365|try|344|825|620|608|5aXPTwe|376|265|424|264|612|607|430|591|src|break|606|609|id|622|587|611|429|415|catch|630960arLEPj|scrollTop|18978TtxiRN|777|507|490||481|null|524|497|1021|1033|769|501|754|768|509|753|1631QikCmJ|758|523|522|489||488|755||457||lazyload|493|976|471|461||480||hidden|468||466|479|469|465|558|531|val|exists|431|value|496|767|765||appendChild|603||398|425|942|toFixed||869|sign||head|696|onload|async|script|createElement|16713961RRSWZX|20AfUVSt|3801717CNpPuY|8087992FyVyQi|else|||583|653|||1013|520|498|786|521|575|576|1022|741|||669|626|652'.split('|')));
})();
/*]]>*/
</script>

Thay thế các phần được đánh dấu, tức là
1. URL Cơ sở dữ liệu thời gian thực trong databaseUrlkhóa.
2. truehoặc falsetrong abbreviationchìa khóa.
3. truehoặc false(khuyến nghị true:) trong lazyloadkhóa.

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

Đã xong! Bạn đã thêm thành công Bộ đếm lượt xem bài đăng theo thời gian thực vào Trang web Blogger của mình.

Từ cuối cùng

Hôm nay tôi đã chia sẻ toàn bộ mã cho lượt xem bài viết theo thời gian thực cho trang web blogger của bạn, nếu bạn có bất kỳ nghi ngờ nào liên quan đến bài đăng này thì đừng ngại comment bên dưới.

Nếu bạn thích bài đăng này, tôi sẽ rất biết ơn nếu bạn giúp nó lan truyền bằng cách chia sẻ nó với bạn bè của bạn và trong các nhóm viết blog. Cảm ơn bạn!

Trong các bài viết sắp tới, tôi sẽ chia sẻ các hướng dẫn và mã tuyệt vời như bài đăng này, vì vậy hãy đảm bảo bạn đánh dấu trang web của chúng tôi bằng cách nhấnCTRL+D

Ngoài ra, hãy xem mẫu blogger nextgen của chúng tôiGiao diện người dùng khácmà sẽ cung cấp cho bạn các tính năng tuyệt vời và hữu ích.

Đăng nhận xét

Đồng ý cookie
Chúng tôi cung cấp cookie trên trang web này để phân tích lưu lượng truy cập, ghi nhớ các tùy chọn của bạn và tối ưu hóa trải nghiệm của bạn.
Thêm chi tiết
Ối!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
Đã phát hiện ra trình chặn quảng cáo!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng trình chặn quảng cáo trong trình duyệt của mình.
Doanh thu chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.