Hiển Thị Số Lượt Xem Bài Đăng Trong Blogspot

Số đếm lượt xem bài đăng của Blogspot được thống kê trong bảng điều khiển Blogger, tuy nhiên nhiều blog muốn hiển thị số lần xem bài đăng đó ra ngay giao diện để bạn đọc Blog thấy được số lượt xem của họ là bao nhiêu. Việc tạo nên thủ thuật này cũng khá hay và Phong nhận thấy nó khá hữu ích cho blog của bạn mà không làm ảnh hưởng gì tới blog.
- Ưu điểm của tiện ích này là chiếm vị trí khá nhỏ và gọn gàng nhưng lại gây chú ý cho người xem luôn. Tốc độ load nhanh lấy ngay được dữ liệu đếm của Blogger.

DEMO

Hướng Dẫn Thủ Thuật Hiển Thị Số Lượt Xem Bài Đăng Trong Blogspot

Để làm được thủ thuật này các bạn thực hiện các bước sau:
Bước 1: Đăng ký tài khoản Firebase
Firebase cho bạn đăng ký miễn phí để sử dụng tiện ích này, bạn VÀO LINK NÀYđể đăng ký. Rất dễ dàng bạn tạo 1 App cho tiện ích này.

Hiển thị số lượt xem bài đăng trong Blogspot, Firebase

Mình có được 1 App là: https://vuvanphong.firebaseio.com/
Bước 2: Thêm code thống kê vào mẫu.
Vào bảng điều khiển Blogger -> Mẫu (Template) -> Chỉnh sửa HTML (Edit HTML)
-( Ctrl + F ) tìm tới ]]></b:skin> và dán code dưới đây ngay trên nó

/*-------- Thống kê bài viết. Hướng dẫn bởi vuvanphong.com ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcyMc2iS4NRJgt2hwYeownZu90ED6R-3CPzDitYLBZ1jX8Rg72yahfENY8aD6ZXT05mcFGu70wNKx4by_Ky5vUiwUsKRTz2yv7BecJqitp7vcDW38RhO8WQcuFsKw2HcNqsP45bCdRoI9/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: #EE5D06;
font: bold italic 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #333;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnAOZFu3yWaDGCQWASa3J9qFDz3HVp5G7issbNs_YIfYQXWcN2iq1-nG3MRRnZ-x3ZzvXo90Qz8oFLyU8sNg88ejT9NZzuGGgNLcvUosH0dfpQ-NnolxZAkTMgzzfmbA3DEViuov_-L1vr/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

- Chữ bôi đỏ là màu sắc của số đếm,
-> Tiếp theo bạn tìm tới </body> và dán code dưới đây ngay trên nó.

<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://vuvanphong.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.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>

- Liên kết App: https://vuvanphong.firebaseio.com/ được bạn thay đổi bằng link của bạn lấy.
-> Tiếp theo bạn tìm tới <data:post.body/> và dán code dưới đây ngay trên nó.
Chú ý: Nếu bạn tìm thấy nhiều <data:post.body/> thì hãy lựa chọn kết quả tìm thấy đầu tiên