Hướng dẫn thêm lượt xem bài viết vào blogspot mới nhất

Bài viết ngoài trang chủ hay bài viết chi tiết nếu có hiển thị lượt xem bài trông sẽ rất thẩm mỹ qua đó cũng tạo cho blog chuyên nghiệp và t...

Bài viết ngoài trang chủ hay bài viết chi tiết nếu có hiển thị lượt xem bài trông sẽ rất thẩm mỹ qua đó cũng tạo cho blog chuyên nghiệp và thân thiện hơn đối với người đọc, và không kém phần quan trọng mang lại sự tương tác cao hơn đặc biệt với những blog bán hàng hay blog xem online. Việc thêm lượt xem không khó nhưng phải chính xác thì mới hiển thị lượt xem được. Vẫn theo cách sử dụng dịch vụ của firebase nay đã sát nhập vào Google nên chúng ta không cần phải đăng ký nữa chỉ cần đăng nhập bằng tài khoản Goolge là được.

Công việc tiếp theo sẽ tạo một project mới, nếu có rồi bỏ qua bước này.

Lưu ý: Quốc gia để ở đâu cũng được tốt nhất mình ở đâu thì để ở đó. Khi đã có project chuyển sang bước 2 sửa rules, vào giao diện project truy cập Database sau đó copy đoạn code dưới đây thay thế. Hình demo

Code:

{
"rules": {
".read": true,
".write": true
}
}

Copy xong chuyển qua bước 3 lấy project id của app. Truy cập vào biểu tượng bánh răng cưa chọn Project settings bên phải tìm đến dòng Project ID và copy nó

Bước 4: Truy cập Blogger chọn Chủ đề » Chỉnh sửa HTML » copy đoạn script bên dưới vào trước thẻ đóng </body>

<script src='http://ift.tt/1bi3DYf' type='text/javascript'/>
<script>
$.each($(&#39;a[name]&#39;), function(i, e) {
var elem = $(e).parent().find(&#39;#postviews&#39;);
var blogStats = new Firebase(&quot;https://Project IDhttp://.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.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>

Thay thế Project ID ở bước 3

Bước 5: Chèn đoạn code dưới đây vào nơi cần hiển thị có thể ngoài trang chủ hay trang bài viết

<span expr:name='data:post.id'/> <i class='fa fa-eye' style='color:#777;'/> <span id='postviews' style='color:#777;'/> Lượt xem

Bạn có thể bỏ chữ Lượt xem hoặc xóa cũng được. Phần color bạn sửa thành màu theo ý muốn, kiểm tra nếu temeplate của bạn chưa có fontawesome thì copy thêm đoạn này dưới thẻ <head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

Như vậy chỉ vài bước đơn giản thôi là bạn đã thêm được lượt xem bài viết trông rất chuyên nghiệp phải không.

Link bài viết gốctại đây

Share Tool Nhỏ

Hướng dẫn thêm lượt xem bài viết vào blogspot mới nhất | Chia sẻ tool