[6][A.Thông điệp][slider-top-big][nothing]
You are here: Home / , , Tạo thống kê truy cập cho bài viết blogspot

Tạo thống kê truy cập cho bài viết blogspot

| 45 Comments

Tạo thống kê truy cập cho bài viết blogspot


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 view 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.

Đầu tiên mời bạn xem Demo:



Các thao tác thực hiện

Bước 1: Tạo một tài khoản  Firebase


 Nhấn vào link dưới để đă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

+ Nhập tên trang con. Như trang mình, mình nhập erhay.  Sau đó nhấn Create Firebase. 

 OK. Vậy là mình sẽ có đường dẫn :


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





+ Nhấn Ctrl + F để tìm với khóa ]]></b:skin>. Thêm vào trước đó CSS dưới :
  
   - Chỉnh lại ảnh loading hoặc xóa đi (màu xanh)
   - Chỉnh lại mã màu hiển thị số view  Black  bằng mã màu khác nếu bạn muốn



/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8RT2zJC_iUUCd8YalKvCjUY2nlpVhVin0OCbqU64AnhYvLbUpJLMpVrzHfLpgMeh7OTEkwbotYbonmLWPOsTFrbqvhOG3UUdYnsvhCL1PnwhX5YOVkZJGPiCGASxaPdvygZT-NwlYHIvM/s320/mbtloading.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: right;
color: Black;
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/AVvXsEjzkpAVb-sLdTn3xIkeeelUWUXA4JkrqV2hlsGLTjl7jOKx2U3Zrr93Xt_0lz6EOV2qNvWYnspWOvZ2_Vt2R0AODc_UrESA3SoMLG87k7lWUhfvkIhrr4PanSdW41CSszghA-yEbUz2oro/s16/view_icon.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}

Bước 4. Nhấn Ctrl + F để tìm lấy khóa </body> 


Thêm vào trước đó code JS sau :
  - Thay link http://erhay.firebaseIO.com bằng link bạn vừa tạo ở trên.

<!-- Post Views Script by MBT -->
<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;http://erhay.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>

Bước 5: Thêm jquery.min.js


Thêm trước </head> hoặc bên dưới <head>. 

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

Bước 6: Search với khóa : <data:post.body/>


Trước khóa đó bạn thêm code sau :

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

Nếu bạn muốn thêm bên dưới tiêu đề bài viết thì search với khóa: <div class='post-body entry-content

 Thêm trước đó:

<div style='height:30px; margin-bottom:5px;">
<div id='views-container'><span class='views-icon'/><div class='views-text'>Số lượt xem:</div> <div class='mbtloading viewscount' id='postviews'/></div>
</div>

Nếu bạn muốn thống kê chỉ hiện trên trang chủ thì thêm bằng code:



<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Post Views Counter by MBT-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Số lượt xem:</div> <div class='mbtloading viewscount' id='postviews'/></div>
</b:if>


Bước 7: Save template và test thử. 


Note : Nếu bạn gặp khó khăn có thể comment hoặc làm test thành công hãy chia vui cùng chúng tôi !

(Vui lòng ghi lại nguồn erhay khi bạn phát hành lại thông tin từ trang này)
Related Posts
  • Default comments
  • Facebook comments
Subscribe to: Post Comments ( Atom )