Hiển thị lượt xem bài viết cho blogspot với Firebase - NEW

Tất cả các blogger bây giờ chắc hẳn đề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í". Và ngay bây giờ ta có thể dễ dàng tạo ra bộ đếm truy cập bài viết mà không cần lo lắng về máy chủ hoặc mã máy chủ với dịch vụ miễn phí như firebase. Firebase đã được đưa ra trong tháng 4 năm 2012 và kể từ đó nó đã từng là trung tâm cho các nhà phát triển. Thật ngạc nhiên, kế hoạch miễn phí này cung cấp cho bạn 10GB băng thông miễn phí và lưu trữ miễn phí 5GB. Các dữ liệu truy cập sẽ được lưu trữ trên một cơ sở dữ liệu miễn phí được cung cấp bởi firebase. Và bạn có thể xem demo để hiểu rõ hơn về tiện ích này

Live Demo

Tạo tài khoản Firebase

Trướ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/AVvXsEgOEz88Y_aJ8LwbdUquU4D7uCh0p0x07-lpsDr_MtLERfAleu3HJV-YpuqEGTfAA2VVx9UfO9zuEglsuz-eNEsXUOY-vTLfK-6qaaxenkbOKhIbZkVm95Xf5APpnSew8TaksH1aU9YQRamU/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/AVvXsEgrUPRmu-SWeXW0Q1m5NWJXMmMMkh3wG-NDDK34ICrYwmO_jUuxvU2UGqAWlJweECkZyeFaGzsM2HnU2vExO0bbrzrFmFTuAX-Pgehgxi78pgA5fSsXN1Mg0y2u3d413vDajr41w1Y8x3Oy/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://huycovip.firebaseio.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 huycovip.firebaseio.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
Hãy chia sẻ và comment để ủng hộ mình nha! Chúc bạn thành công!