Hướng dẫn tạo hộp thống kê trượt dọc cho blogspot

Thống kê Blog khá quan trọng với mỗi blogger, nó giúp người xem nắm được tổng quan Blog cũng như giúp webmaster theo dõi tình hình hoạt động để có chiến lược hiệu quả trong thời gian sắp tới.

Các tiêu chí thống kê Blog phổ biến được blogger sử dụng đó là tổng số bình luận, tổng số bài viết, tổng số trang tĩnh,... ngoài ra còn có tiện ích ngoài như thời gian tải trang, số người đang online. Blogger có cung cấp API để có thể gọi lấy các thông tin trên.

Bài viết này sẽ chia sẻ cho bạn đọc form thống kê chạy dọc blog với hiệu ứng cực cool, bao gồm thống kê số bình luận, số bài viết, số trang tĩnh và thời gian tải trang, xem demo phần bên trái của bài viết này.

Trước khi bắt đầu thủ thuật bạn hãy suy nghĩ thật kĩ có nên tích hợp nó vào hay không vì mỗi một thống kê sẽ phải tải feed, điều này ảnh hưởng rất lớn tới tốc độ tải trang của bạn.

Hướng dẫn thực hiện

Bước 1: Đầu tiên, vào Quản trị Blogger > Chỉnh sửa HTML

Bước 2: Tích hợp js fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Bước 3: Viết CSS, dán code sau vào trước thẻ ]]></b:skin>

/* Statistics */
.statistics{position:fixed;left:1%;top:35%;background:#fff;border-radius:5px;z-index:200;width:47px;padding:0 0 4px;box-shadow:1px 1px 15px rgba(128,128,128,0.5);font-size:16px!important}
.statistics ul{padding:10px 7px!important;margin:0!important}
.statistics ul li{list-style:none}
.icon-statistics{color:#222;cursor:pointer;border:.089em solid #cacaca;border-radius:50px;height:30px;line-height:30px;width:30px;overflow:hidden;display:block;float:left;margin-bottom:5px;-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;-ms-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}
.icon-statistics i{margin:0 3px 0 7px}
.icon-statistics.page-statistics:hover{width:90px;background:#1f8401;color:#fff}
.icon-statistics.cmt-statistics:hover{width:130px;background:#3a579a;color:#fff}
.icon-statistics.post-statistics:hover{width:105px;background:#d63808;color:#fff}
.icon-statistics.load-statistics:hover{width:120px;background:#420420;color:#fff}
.icon-statistics.page-statistics:hover:after,.icon-statistics.cmt-statistics:hover:after,.icon-statistics.post-statistics:hover:after,.icon-statistics.load-statistics:hover:after{display:initial}

Bước 4: Cuối cùng đặt đoạn code sau trước thẻ đóng </body>

<div class='statistics'>
<ul>
<li><span class="icon-statistics cmt-statistics"><i class="fa fa-comments-o"></i><span id="totalComment"></span></span>
</li>
<li><span class="icon-statistics post-statistics"><i class="fa fa-edit"></i><span id="totalPost"></span></span>
</li>
<li><span class="icon-statistics page-statistics"><i class="fa fa-file-powerpoint-o"></i><span id="totalPage"></span></span>
</li>
<li><span class="icon-statistics load-statistics"><i class="fa fa-spinner fa-spin"></i><span id="loadTime"></span></span>
</li>
</ul>
</div>
<script style="text/javascript">
function numberOfComments(json) {
document.getElementById("totalComment").innerHTML = json.feed.openSearch$totalResults.$t + ' comments';
}
function showpostcount(json) {
document.getElementById("totalPost").innerHTML = parseInt(json.feed.openSearch$totalResults.$t, 10) + ' posts';
}
function numberOfPages(json) {
document.getElementById("totalPage").innerHTML = json.feed.openSearch$totalResults.$t + ' pages';
}
var startTime = new Date();
function currentTime() {
var a = Math.floor((new Date() - startTime) / 100) / 10;
if (a % 1 == 0) a += ".0";
document.getElementById("loadTime").innerHTML = a + ' seconds';
}
window.onload = function() { clearTimeout(loopTime) }
var loopTime = setInterval("currentTime()", 100);
</script>
<script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script>
<script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script>
<script src="/feeds/pages/default?alt=json-in-script&callback=numberOfPages"></script>

Bước 5: Lưu lại và kiểm tra kết quả.

Tùy chỉnh CSS theo ý thích của bạn, nếu xung đột id hoặc class hãy thay đổi sao cho hợp lý. Cảm thấy khó khăn chỗ nào cứ để lại bình luận mình sẽ trợ giúp.