Thêm tiện ích thống kê trượt dọc theo bài viết cho Blogger

ướng dẫn thêm tiện ích thống kê trượt dọc theo bài viết cho Blogger. 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. Với tiện ích này 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.

Tuy vậ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.

Bước 1: Vào Chỉnh sửa HTML > Ctrl-F, tìm thẻ </head> và thêm trên/trước nó

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

*Lưu ý: nếu template của bạn đã có thư viện rồi thì bỏ qua bước này.

Bước 2: Tiếp tục tìm và 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}

Bước 3: Thêm đoạn code này trên/trước </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>