- Ư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.
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.
Mình có được 1 App là: https://phuocantran.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 phuocantran.blogspot.com ----------*/
#views-container {width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEircE7yDyv1ez9MrqnuIgb9DgFWQmOG2BtQgNVdNf38IPlDDmWnrc25yzBpfL56tYewPwLnAmP3gCeTY_Mwfy2Y_UKfpAbpEHKz2yf9k5jXbiYb90cNgpwUiv0_6x5_T0RdPlrq6Io1UbSh/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/AVvXsEgBLMnp6A4cGELS5m4t5R4poM48mcB89A0WwaL6mxcTUK6Ce6CImV_LA9TRVdg-yR1mSxbm_VwA_tMEImUDQ9fJe_C2Mg1_e7OPRozDSMv1Fx0mypN159nJvMm3PFqXjPBEF05lB4fdd0di/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://phuocantran.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>
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://phuocantran.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://phuocantran.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, vào Blog để xem kết quả
Chúc bạn một ngày vui vẻ !
• Bạn phải đăng nhập tài khoản Google thì có thể bình luận.
• Không SPAM & không quảng cáo website
• Lưu ý: Có thể chèn link <a href="Link" rel="nofollow">Tiêu Đề</a>
XIN CÁM ƠN!