10/3/14

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

Đăng bởi Admin | 10/3/14 | 1 nhận xét
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.
     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 !
Đầu tiên mời bạn xem Demo:
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 :
<!--BEGIN bo dem doc bai viet -->
<!-- Post Views Script by MBT -->
<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>
<!--END bo dem doc bai viet -->

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:
<!--BEGIN bo dem doc bai viet -->
<!-- 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>
<!-- END bo dem doc bai viet -->

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):
<!-- BEGIN Bo dem code bai viet-->
<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>

<!-- BEGIN Bo dem code bai viet-->

Vị trí chèn trong Template của Blog, xem hình dưới
Thế là công việc chèn đã xong, bạn hãy lưu mẫu và thoát khỏi chương trình chỉnh sữa HTML rồi thoát ra khỏi Blog.
Sau đấy vào lại Blog dể xem kết quả
Chúc các bạn thành công !

                                                                                              (Theo: giadinhcuquang.net)

1 nhận xét:

Cảm ơn bạn đã nhận xét !
- Bạn có thể chèn link vào nhận xét bằng thẻ: <a href="Link" rel="nofollow">Tên link</a>
- Tạo <b>Chữ đậm</b> và <i>Chữ ngiêng</i> cho nhận xét
- Hãy Chuyển đổi mã code trước khi chèn vào nhận xét
- Hãy bấm Theo dõi dưới chân trang để nhanh chóng nhận được phản hồi từ Thủ thuật vi tính
- Những nhận xét nào không lành mạnh hoặc chèn link spam sẽ bị xóa khỏi blog.

Mã hóa Code

Support : Trick Blogspot | Ghost win | Website Design | Seo Trick | Ghost win | Software Free | Site Map | Back Link | Contact Advertising | ↑ back to top
Ghi rõ nguồn thuthuatvitinhaz.blogspot.com dưới dạng liên kết khi phát hành lại thông tin từ trang này
Copyright © 2013. Thủ thuật Số - All Rights Reserved
Design by Ngân Giang
Xem tốt nhất ở độ phân giải 1024 x 768 pixel
Template by Dameva