Hướng dẫn thêm code đếm lượt xem bài viết trong blogger

Chào các bạn, hôm nay mình sẽ hướng dẫn các bạn cách để thêm code đếm lượt xem một bài viết trong blogger.
Thủ thuật này thì cũng có nhiều bài viết trên mạng rồi nhưng hôm nay mình vẫn viết bài viết này để hướng dẫn chi tiết cho các bạn để làm được.


Các bạn có thể xem demo như hình bên dưới

HƯỚNG DẪN CÁCH LÀM

Đầu tiên các bạn truy cập https://firebase.google.com/ rồi nhấn vào GO TO CONSOLE

Sau đó các bạn nhấp vào tạo Project mới

Tiếp theo các bạn điền tên Project và Quốc gia, ngoài ra bạn cũng có thể sửa lại ID Project theo ý mình

Sau khi đã tạo xong Project bạn click vào Database rồi chọn tab Rules tiếp theo các bạn copy đoạn code sau đây và dán vào bảng rồi nhấn Publier

{
“rules”: {
“.read”: true,
“.write”: true
}
}



Tiếp theo các bạn vào phần cài đặt để lấy ID Project hoặc nếu bạn nhớ ID Project lúc bạn tạo Project thì có thể bỏ qua bước này

Sau khi đã có ID Project các bạn vào blogger chọn Chủ đề -> Chỉnh sửa rồi copy đoạn code sau và dán lên trước thẻ </body> nhớ thay ID Project của bạn vào nhé. 

<script src=’https://cdn.firebase.com/v0/firebase.js’ type=’text/javascript’/>
<script>
//<![CDATA[
$.each($(‘a[name]’), function(i, e) {
var elem = $(e).parent().find(‘#luotxem’);
var blogStats = new Firebase(“https://ID Project.firebaseio.com/pages/id/” + $(e).attr(‘name’));
blogStats.once(‘value’, function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr(‘name’);
isnew = true;
}
elem.text(data.value);
data.value++;
if(window.location.pathname!=’/’)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(‘value’).set(data.value);
}
});
});
//]]>
</script>

Tiếp theo các bạn copy đoạn code sau và dán vào nơi bạn muốn hiển thị

<a expr:name=’data:post.id’/> <i class=’fa fa-eye’/> <span id=’luotxem’/>

Nếu blog của bạn chưa có fontawesome thì thêm đoạn code sau bên dưới thẻ <head>

<link href=’//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css’ rel=’stylesheet’/>

LỜI KẾT

Vậy là chỉ với vài bước các bạn đã có thể tự tạo cho mình một đoạn code để hiển thị số lượt xem bài viết cho blog của mình rồi
Chúc các bạn thành công.
Nếu bạn gặp lỗi gì hãy comment bên dưới bài viết này

Leave a Comment