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

#Thủ Thuật #Windows #Blogger #Facebook

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

Share:
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 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
CHUYÊN MỤC

Bài Viết Liên Quan

Bình Luận Gần Đây

2 Nhận xét

Cái Demo một đường, làm Hd 1 nẻo :v

DEMO là cái view hình con mắt thôi có phải làm cả cái kia đâu :P

Một số lưu ý khi bình luận
● Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.
● Tích vào ô Thông báo cho tôi (Notify me) để nhận thông báo phản hồi của Admin.
● Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
● Để bình luận một đoạn code, hãy mã hóa code trước nhé.