Khá thú vị với nhiều câu hỏi về thủ thuật tạo thống kê lượt views bài viết. Và mình sẽ chia sẻ cách làm theo yêu cầu của các bạn ở bài viết này. Đây là thủ thuật được mình chia sẻ tại Blog cá nhân, và chia sẻ lại ở Website này để bạn đọc theo dõi rộng hơn.
- Ư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.
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/AVvXsEipv_b-zQdYSbZYC8-t934sie5Rl5H1bEHupRNgPfytSTAlPIQSLdntklqmDd4KumUoHrQ24O-BKKgc-FVCp3a25fe4UigP6GyrIHdI0pDPph-OP4I6P9QmkEbmUo1jce0EgeIDUagECVVv/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/AVvXsEih70ianYqYw_VQqBUQ8PEWce95SNKeZ8i7EW99P0tX4TnjfJIMkR3XpUfdLohxHf83duxKiq1gYRTUP6qBGC5IDZ_ie7qdiJpHC4MolNBAvz_39Em2-kGY6K7WuVRj4Wmz_nlDJE0guGWG/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
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>PS: Đoạn Javascript này cần sự hỗ trợ của Jquery nên nếu trong Template bạn chưa thấy có thì thêm Jquery đó vào dưới <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>-> Bạn lưu lại mẫu, bấm F5 Blog để xem kết quả
Chúc bạn vui vẻ !