Tạo hộp thống kê trượt dọc cho blogspot

Anh Trai Nắng
3

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.

Tạo hộp thống kê trượt dọc cho blogspot
Tạo hộp thống kê trượt dọc cho blogspot.

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ĩnhthời gian tải trang, xem demo phần bên trái của bài viết này.

Demo các bạn xem bên cạnh bài viết này luôn nhé!

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.

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

3 Nhận xét

Đăng nhận xét

HƯỚNG DẪN BÌNH LUẬN

Chèn link

Sử dụng công cụ Tạo link

Chèn hình ảnh

LINK_ANH - sử dụng công cụ upload ảnh. Và chỉ cần lấy link ảnh chèn vào bình luận là ảnh tự động hiển thị.

Định dạng chữ

<b>Chữ in đậm</b>
<i>Chữ in nghiêng</i>
<u>Chữ gạch chân</u>
<strike>Chữ gạch ngang</strike>

Chèn một đoạn Code

Đầu tiên sử dụng công cụ này để mã hóa đoạn code muốn chèn.
Sau đó dùng thẻ [code] CODE_ĐÃ_MÃ_HÓA [/code]

Khác

Nhập Email bạn hay dùng để nhận thông báo khi mình trả lời bình luận của bạn.
Vui lòng không nhập bất kỳ Liên kết Spam nào trong hộp nhận xét.
Tích vào ô "Thông báo cho tôi" để nhận thông báo nội dung phản hồi của bình luận.
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

Đã hiểu