Firebase - Tiện ích hiển thị lượt xem bài viết cho blogspot

Tất cả các  blogger  bây giờ  đều mong muốn sẽ có một tiện ích  đếm số lượt đọc bài viết trên blog  của mình một cách "miễn phí"...

Tất cả các blogger bây giờ  đều mong muốn sẽ có một tiện ích đếm số lượt đọc bài viết trên blog của mình một cách "miễn phí".

Quảng cáo:  Dầu Dừa Nguyên Chất - Vua Dầu Dừa

Đếm lượt xem bài viết 

Đếm xem số lượt người đã xem qua bài viết 


Tạo tài khoản Firebase

Trước tiên bạn phải tạo một tài khoản firebase bằng cách click vào đây sau đó thực hiện theo hướng dẫn bằng hình ảnh


Bạn cần phải ghi nhớ đường link đã tạo được ở bước 4 hình ảnh trên để thực hiện các bước tiếp theo của thủ thuật


Cài đặt bộ đếm lượt truy cập bài viết cho blogspot

Bước 1: Vào blogger → Mẫu → Chỉnh sửa HTML
Bước 2: Mở rộng mẫu tiện ích
Bước 3: Dán code bên dưới trước thẻ ]]></b:skin>
#views-container {
width: 375px;
float: left;
}
.tvlloading {
background: url('http://4.bp.blogspot.com/-v6Ib-swrPvY/USRxsy7nnMI/AAAAAAAAK5E/iNF381acMbE/s1600/loadingtvl.gif') no-repeat left center;
width: 16px;
height: 16px;
}
.viewscount {
float: left;
padding-left: 5px;
color: #0F83A0;
font: bold 14px arial;
}
.views-text {
float: left;
font: bold 12px arial;
color: #0F83A0;
}
.views-icon{
background: url('http://4.bp.blogspot.com/-hlZGTI2qYQk/USRyQcbzyEI/AAAAAAAAK5U/hTcVdOPSC_M/s1600/thongke.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
margin: -3px 2px 2px 2px;
}


Bạn có thể đổi left thành Right nếu muốn hiển thị bên phải

Bước 4: Tìm thẻ </body> sau đó dán trên nó đoạn code sau
<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;tvlloading&#39;);
var blogStats = new Firebase(&quot;https://thu-thuatblog.blogspot.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;tvlloading&#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>
Nhớ thay link thu-thuatblog.blogspot.com bằng link mà mình đã lưu ý bạn ở bước 4 ở Tạo tài khoản Firebase
Bước 5: Tiếp tục tìm thẻ <data:post.body/> và dán trước nó code sau rồi lưu template lại để hoàn tất thủ thuật
<div id='views-container'><span class='views-icon'/><div class='views-text'>Lượt Xem:</div> <div class='tvlloading viewscount' id='postviews'/></div>
Dán code trên vào đoạn code đầu tiên bạn tìm được trong template
Bạn có thể thay thế Lượt Xem: bằng từ nào phù hợp với blog bạn

Chúc bạn thành công với thủ thuật hiển thị lượt xem bài viết cho blogger

COMMENTS

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Firebase - Tiện ích hiển thị lượt xem bài viết cho blogspot
Firebase - Tiện ích hiển thị lượt xem bài viết cho blogspot
http://1.bp.blogspot.com/-i4h8ElG4EmA/UnkVK6dszTI/AAAAAAAAPWc/BpS-r4BRqeQ/s1600/dkfirebase.png
http://1.bp.blogspot.com/-i4h8ElG4EmA/UnkVK6dszTI/AAAAAAAAPWc/BpS-r4BRqeQ/s72-c/dkfirebase.png
Khám Phá Blogger
https://blogger.affimart.com/2013/11/firebase-tien-ich-hien-thi-luot-xem-bai.html
https://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2013/11/firebase-tien-ich-hien-thi-luot-xem-bai.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy