[Blogger] Tạo thống kê trượt dọc Blogspot

Thống kê website khá quan trọng với mỗi blogger, nó giúp người xem nắm được tổng quan website 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ê website 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ể call 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

Đăng nhập vào blogger và vào mục chỉnh sửa HTML

Tích hợp 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'/>

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

/* Statistics blogger by hung1001 */
.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}

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>

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ý

Good luck !