Hiển thị số lượt xem bài viết đơn giản cho Blogger với busuanzi.js

Hiển thị số lượt xem bài viết đơn giản cho Blogger với busuanzi.js

Updated on May 13, 2019
Hiển thị số lượt xem bài viết để xem mức độ quan tâm của độc giả đối với bài viết. Bạn có thể áp dụng cách dùng Firebase, với ưu điểm là ổn định do là một sản phẩm của Google, nhược điểm là sử dụng Js kích thước lớn, cách cài đặt có thể gây khó khăn cho một số bạn chưa quen.

Bài viết này mình sẽ hướng dẫn một cách khác, đơn giản hơn, js nhẹ hơn đó là dùng busuanzi.js

Bước 1

Vào mục chỉnh sửa mẫu của Blogger, thêm script sau lên trên thẻ đóng </body>:
<script>
/*<![CDATA[*/
var bszCaller,bszTag;!function(){var c,d,e,a=!1,b=[];ready=function(c){return a||"interactive"===document.readyState||"complete"===document.readyState?c.call(document):b.push(function(){return c.call(this)}),this},d=function(){for(var a=0,c=b.length;c>a;a++)b[a].apply(document);b=[]},e=function(){a||(a=!0,d.call(window),document.removeEventListener?document.removeEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.detachEvent("onreadystatechange",e),window==window.top&&(clearInterval(c),c=null)))},document.addEventListener?document.addEventListener("DOMContentLoaded",e,!1):document.attachEvent&&(document.attachEvent("onreadystatechange",function(){/loaded|complete/.test(document.readyState)&&e()}),window==window.top&&(c=setInterval(function(){try{a||document.documentElement.doScroll("left")}catch(b){return}e()},5)))}(),bszCaller={fetch:function(a,b){var c="BusuanziCallback_"+Math.floor(1099511627776*Math.random());window[c]=this.evalCall(b),a=a.replace("=BusuanziCallback","="+c),scriptTag=document.createElement("SCRIPT"),scriptTag.type="text/javascript",scriptTag.defer=!0,scriptTag.src=a,document.getElementsByTagName("HEAD")[0].appendChild(scriptTag)},evalCall:function(a){return function(b){ready(function(){try{a(b),scriptTag.parentElement.removeChild(scriptTag)}catch(c){bszTag.hides()}})}}},bszCaller.fetch("//busuanzi.ibruce.info/busuanzi?jsonpCallback=BusuanziCallback",function(a){bszTag.texts(a),bszTag.shows()}),bszTag={bszs:["site_pv","page_pv","site_uv"],texts:function(a){this.bszs.map(function(b){var c=document.getElementById("busuanzi_value_"+b);c&&(c.innerHTML=a[b])})},hides:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="none")})},shows:function(){this.bszs.map(function(a){var b=document.getElementById("busuanzi_container_"+a);b&&(b.style.display="inline")})}};
/*]]>*/
</script>

Bước 2

- Thêm code hiển thị lượt xem bài viết bên dưới vào vị trí mong muốn ở trang bài viết:
<span id='busuanzi_container_page_pv' style='display:none'><span id='busuanzi_value_page_pv'></span> views</span>

- Thêm code thống kê blog (số khách đang truy cập, số lượt xem blog) vào vị trí mong muốn:
<span id='busuanzi_container_site_uv' style='display:none'>
Site Visitors&#65306;<span id='busuanzi_value_site_uv'></span>
</span>
<span id='busuanzi_container_site_pv' style='display:none'>
Traffic&#65306;<span id='busuanzi_value_site_pv'></span>
</span>

Hạn chế

Nhược điểm của cách này là khi ở trang index, số lượt xem từng bài viết sẽ không được hiển thị, mà nó chỉ hiển thị khi bạn đang ở trang bài viết.

8 comments for Hiển thị số lượt xem bài viết đơn giản cho Blogger với busuanzi.js

Cancel
avatar

Bạn sửa liên kết Nguyễn Duy Blog giúp mình với ạ!
Url: https://www.duyblogs.com/
Title: Duy Blogs
Mô tả: Blog chia sẻ Thủ Thuật.

Reply Delete
avatar

ad ơi, mình làm theo nhưng không được nữa, link js bị lỗi rồi hay sao ấy vì mình thử clik vô thì bị báo lỗi

Reply Delete
avatar

Mình vừa cập nhật lại bài viết bạn nhé :)

Reply Delete
avatar

Thay giúp mình liên kết với ạ :3
Url: https://nguyenluongduy.blogspot.com/
Title: NgDuy Blog
- Mình làm lại Blog :))

Reply Delete
avatar

chia sẽ cái cách reply comment ở tab khác đi ad

Reply Delete
avatar

Mỗi lần f5 là 1 view ko hay lắm

Reply Delete
avatar

Hiện tại chỉ thực hiện được như thế thôi. :)

Reply Delete