Tạo widget thống kê tuyệt đẹp cho blogspot/blogger

Chào các bạn hôm nay mình sẽ hướng dẫn cho các bạn tạo widget thống kê tuyệt đẹp cho blogger. Và cái này mình lấy ý tường từ Juno_okyo's Blog

Demo thống kê cho blogger

HƯỚNG DẪN CÁCH LÀM:

Để thực hiện thêm tiện ích này bạn cần Đăng nhập vào blogger -> Bố cục -> Thêm tiện ích HTML sau đó sử dụng đoạn code dưới đây

<style>
section.widget_info_blog{padding:0!important;overflow:hidden;background:transparent!important;border-radius:3px 3px 0 0!important}
.feau{height:120px;background:#00a7d0;font-size:23px;color:#fff;padding:0;text-decoration:none}
.feau h3{margin-top:0;margin-left:10px;margin-bottom:5px;font-size:25px;font-weight:500;text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.feau p{font-size:16px;margin-left:10px}
.title-blog{padding:10px}
.logo-widget img{max-height:90px;border:3px solid #fff;border-radius:50%;margin-top:-40px;margin-left:calc(50% - 40px)}
.info{float:left;width:100%;background:#fff;min-height:101px;margin-top:-45px}
.col-widget{float:left;width:33%;height:35px;font-size:15px;color:#23282d;margin-top:45px;text-align:center}
.col-widget h5{margin:0;padding:0;font-weight:600;font-size:16px}
</style>
<div class="feau">
<div class='title-blog'>
<h3>Star Bình Blog</h3>
<p>Share Tips & Tricks</p>
</div>
</div>
<div class="logo-widget"> <img src="https://4.bp.blogspot.com/-EwIbmmll-as/Wg_66B--i_I/AAAAAAAACUs/GsjASB1VLlUUA1gq8J_mucFY989JQ7L_wCLcBGAs/s1600/R6pT0pj%2B%25281%2529.jpg" width='90' height='90' draggable='false' oncontextmenu='return false'/> </div>
<div class="info">
    <div class="col-widget so-bai">
        <h5><script style="text/javascript">
            function showpostcount(json) {
                document.write(parseInt(json.feed.openSearch$totalResults.$t, 10));
            }
        </script>
        <script src="/feeds/posts/default?alt=json-in-script&callback=showpostcount"></script></h5>
<span>POST</span>
    </div>
    <div class="col-widget so-comment">
        <h5><script style="text/javascript">
            function numberOfComments(json) {
                document.write(json.feed.openSearch$totalResults.$t);
            }
        </script>
        <script src="/feeds/comments/default?alt=json-in-script&callback=numberOfComments"></script></h5>
<span>COMMENTS</span>
    </div>
    <div class="col-widget so-cau-hoi">
        <h5><script type="text/javascript">
            var startTime = new Date();

            function currentTime() {
                var a = Math.floor((new Date() - startTime) / 100) / 10;
                if (a % 1 == 0) a += ".0";
                document.getElementById("endTime").innerHTML = a;
            }
            window.onload = function() {
                clearTimeout(loopTime);
            }
        </script>
        <script type="text/javascript">
            document.write('<span id="endTime">0.0</span>');
            var loopTime = setInterval("currentTime()", 100);
        </script></h5>
<span>LOAD</span>
    </div>
</div>

Sau đó lưu tiện ích lại và quay lại trang chủ xem kết quả.

TIỆN ÍCH THỐNG KÊ TRÊN BAO GỒM :

- Tổng bài viết
- Tổng số bình luận
- Thời gian tải trang
Chúc bạn thành công!