Tạo bộ đếm số lượt người xem một bài viết trong Blogspot

16 tháng 3, 2014

Blogger ngày càng khẳng định sức mạnh bởi sự đơn giản trong thiết kế cũng như việc quản lý. Việc thống kê số lượt xem trên mỗi bài viết cũng được khá nhiều bạn quan tâm. Trong bài viết này mình sẽ hướng dẫn bạn cách đếm lượt truy cập trên mỗi bài viết. Các bài hướng dẫn tạo bộ đếm truy cập Blog thì khá nhiều nhưng bài hướng dẫn đếm số lượt xem của độc giả ở các bài viết của mình trên Blog thì khá hiếm.

Demo

Tôi muốn trang bị cho Blog của mình bộ đếm số người xem bài viết của mình nhưng tìm mãi trên mạng không có cái nào. Có cái cứ vào blog là các bài viết đồng loạt được tăng lên một cả. Tìm mãi tôi mới thấy thủ thuật này là hay vì chỉ vào bài viết nào thì bài đó mới được tăng lượt dếm còn các bài khác không vào số đếm vẫn được giữ nguyên ! Có điều con số tăng chỉ hiện lên sau lần vào sau thôi không hiện ngay lúc ta vào.
Tuy vậy tôi vẫn chưa ưng ý với bộ đếm này lắm vì mỗi lần Reload thì bộ đếm vẫn xem như ta đã vào bài viết này và chỉ đếm được kể từ khi ta lập bộ đếm này thôi còn trước đó thì không !
Tôi xin viết tút lại rất cụ thể với hình ảnh minh họa để các bạn không quen với việc chỉnh sữa HTML của Blog lắm dễ sử dụng thủ thuật hơn. Trong quá trình áp dụng thủ thuật này tôi đã được sự giúp đỡ nhiệt tình của bạn Minh Anh với đ/c mail : connect@erhay.com. Tôi xin có lời cảm ơn !

Sau đây là các thao tác thực hiện (Kích vào ảnh để xem ảnh to hơn)
Bước 1: Tạo một tài khoản Firebase
Nhấn vào đây để đăng ký

Bước 2: Tạo trang Firebase.

+ Sau khi nhấn Sign up firebase sẽ chuyển bạn đến trang như hình :

+ Không cần điền gì cứ nhấn Next
Tại trang tiếp theo làm như hình dưới

Vậy là mình sẽ có link của firebase :

http://minhluong129.firebaseIO.com

Bước 3: Thêm vào Blogger.

+ Sao lưu template của bạn để đề phòng trường hợp thực hiện sai

+ Vào Dashbroad -> Mẫu -> Chỉnh sửa HTML. Ở trang HTML blog của mình, bạn hãy kích chuột vào một chỗ trống trong nó rồi nhấn Ctrl+F. Sau đấy nhập vào ô Search các code mà mình cần tìm để chèn các code thủ thuật tôi cho vào vị trí thích hợp

Cách chèn các bạn làm theo thứ tự như các hình hướng dẫn bên dưới :

1- chèn ngay sau thẻ mở <head> code thủ thuật sau :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

Nơi chèn như hình dưới

2- Chèn trên thẻ đóng </body> code thủ thuật sau :



<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("http://minhluong129.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>


Vị trí chèn, bạn xem hình dưới và lưu ý là sau khi chèn phải thay chỗ http://minhluong129.firebaseio.com bằng link FIREBASE của bạn mà bạn đã thu được ở cuối bước 1 (quan trọng !! )

3- Chèn trước thẻ <data:post.body/> đoạn code thủ thuật dưới đây:



<div id='views-container'>
<span class='views-icon'/><div class='views-text'>
Số lượt xem:</div>
<div class='mbtloading viewscount' id='postviews'/>
</div>


Vị trí chèn xem hình dưới (phải đúng vị trí đó vì trong code Template Blog của bạn có thể đã hack nên có rất nhiều <data:post.body/> đó). Nếu không đúng vị trí sẽ không hiện được số lượt xem bài viết đâu !

Còn nếu muốn trang trí chữ số ở bộ đếm này, các bạn có thể chèn code thủ thuật sau đây vào trước thẻ đóng </head> trong Template Blog của mình (trong code thủ thuật các bạn có thể thay màu text và màu chữ số theo ý mình. Tôi đã có chú thích trong code mẫu):


<style type="text/css">
.viewscount {
color: #FF0000; /*Màu chữ số */
font-weight:bold;
padding-left:10px;
}
.views-text {
font-weight:bold;
color: #008000; /*Màu chữ */
}
</style>



Vị trí chèn trong Template của Blog, xem hình dưới