Firebase - Hiển thị lượt xem bài viết cho blog

Tất cả các blogger bây giờ đều mong muốn sẽ có một tiện ích đếm số lượt đọc bài viết trên blog của mình một cách "miễn phí".

Đếm lượt xem bài viết

Tạo tài khoản FirebaseTrước tiên bạn phải tạo một tài khoản firebase bằng cách click vào đây sau đó thực hiện theo hướng dẫn bằng hình ảnh

Bạn cần phải ghi nhớ đường link đã tạo được ở bước 4 hình ảnh trên để thực hiện các bước tiếp theo của thủ thuật

Cài đặt bộ đếm lượt truy cập bài viết cho blogspot
Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Dán code bên dưới trước thẻ ]]></b:skin>
#views-container {
width: 375px;
float: left;
}
.tvlloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSsZVgq_MO0lEQQQIdxqrpSTxIeLFLk0QTttzIFpAVLaealqicMYPYCoV9vZJGC_yauBlNP6ZFtO5mbK59CnaQvO0KDk3LO4BdSGw1OfRFxyHZNIyGr7M78F-6QI9oS4IlMJsEhpsW-zk3/s1600/loadingtvl.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: left;
padding-left: 5px;
color: #0F83A0;
font: bold 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #0F83A0;
}
.views-icon{
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgM0vfHCiA2EgldKdJtXFjCgpVP5x-L-PT409cV2r6kAhhHUKrGA0ITzWYOdY7gbTpqN1AcyeqyK3e29F8HlgR1s5OtPvZBMFXSZS1hwW7JkCD19Kl6GBluS2ukWdb_ct7b2s7mWqqtuvjv/s1600/thongke.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
margin: -3px 2px 2px 2px;
} Bạn có thể đổi left thành Right nếu muốn hiển thị bên phải
Bước 4: Tìm thẻ </body> sau đó dán trên nó đoạn code sau
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;).addClass(&#39;tvlloading&#39;);
var blogStats = new Firebase(&quot;https://vnnet247.blogspot.com/pages/id/&quot; + $(e).attr(&#39;name&#39;));
blogStats.once(&#39;value&#39;, 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(&#39;name&#39;);
isnew = true;
}
elem.removeClass(&#39;tvlloading&#39;).text(data.value);
data.value++;
if(window.location.pathname!=&#39;/&#39;)
{
if(isnew)
blogStats.set(data);
else
blogStats.child(&#39;value&#39;).set(data.value);
}
});
});
</script>


Nhớ thay link vnnet247.blogspot.com bằng link mà mình đã lưu ý bạn ở bước 4 ở Tạo tài khoản Firebase
Bước 5: Tiếp tục tìm thẻ <data:post.body/> và dán trước nó code sau rồi lưu template lại để hoàn tất thủ thuật
<div id='views-container'><span class='views-icon'/><div class='views-text'>Lượt Xem:</div> <div class='tvlloading viewscount' id='postviews'/></div>

Dán code trên vào đoạn code đầu tiên bạn tìm được trong template. Bạn có thể thay thế Lượt Xem: bằng từ nào phù hợp với blog bạn

Chúc bạn thành công.