Tạo thống kê lượt xem bài viết cho Blogspot

Số đếm lượt xem bài đăng của Blogspot được thống kê trong bảng điều khiển Blogger, tuy nhiên nhiều blog muốn hiển thị số lần xem bài đăng đó ra ngay giao diện để bạn đọc Blog thấy được số lượt xem của họ là bao nhiêu. Việc tạo nên thủ thuật này cũng khá hay và Phong nhận thấy nó khá hữu ích cho blog của bạn mà không làm ảnh hưởng gì tới blog.
- Ư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.
Hiển thị số lượt xem bài đăng trong Blogspot, Firebase
Mình có được 1 App là: https://vuvanphong.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 vuvanphong.com  ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/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('http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/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(&#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;mbtloading&#39;);
var blogStats = new Firebase(&quot;https://vuvanphong.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;mbtloading&#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>
- 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 đầu tuần vui vẻ !
Nguồn: Vũ Văn Phong
Tạo thống kê lượt xem bài viết cho Blogspot

Tạo thống kê lượt xem bài viết cho Blogspot

Nếu bạn thấy hay thì hãy để khích lệ tinh thần chia sẻ của tác giả BV "Tạo thống kê lượt xem bài viết cho Blogspot"

No comments:

Copyright © 2014 Thanh niên Bình Định - Supported by: IT Việt