Trang chủ
Loading...
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/AVvXsEgfmGfX7jikcZ7Zw9ap92cpxleJujqswDNutwIzzkJCJwx_jdcjh87PA_2pPb58DHNvNz410R3GQLUiFeW10qVkM7N_L2fbJpzXBvO72-HNDmOwFYnObVJyVLIp_NdSYwe4UE46oLt5u99K/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/AVvXsEi0-XTC9rQmeyZLgLDis2w8CbG5R2CUxz-r7sTvT3iGmIAwCXYUqYCQRuI5_meh-Ew_F1P49d-SJBQ2Hv3UCD3OB9sHf2x97Bv3FADVUlAqCr03sALU7edGpypArW6ub3AxA5cPLJnucDSZ/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ẻ !
Nguồn: vuvanphong.com
Loading...
0 nhận xét:
Đăng một bình luận