Share code thống kê Blogspot

Chia sẻ code thống kê blogspot viết bằng Ajax.

Lưu ý: 

CSS chỉ mang tính chất tham khảo, sẽ tùy vào blog mà căn chỉnh cho phù hợp

Code cần thư viện jQuery để chạy, đa số blog nào cũng có rồi.

<style>
/*<![CDATA[*/
#box-static{font-family:'Arial',sans-serif;margin:auto;max-width:400px}
#box-static .title-box{font-size:24px;font-weight:bold;color:#007bff;margin-bottom:20px;position:relative;display:inline-block}
#box-static .title-box::after{content:'';display:block;width:100%;height:2px;background-color:#007bff;position:absolute;bottom:0;left:0;transform:scaleX(0);transform-origin:bottom right;transition:transform 0.3s ease-in-out}
#box-static .title-box:hover::after{transform:scaleX(1);transform-origin:bottom left}
#box-static .container{margin-bottom:20px;background-color:#fff;padding:15px;border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,0.2);transition:transform 0.3s ease-in-out}
#box-static .container:hover{transform:scale(1.05)}
#box-static .label{font-weight:bold;margin-right:10px;color:#333}
#box-static .result{font-weight:bold;color:#007bff;font-size:18px;float:right}
#box-static .loading{color:#6c757d}
#box-static .error{color:#dc3545}
/*]]>*/
</style>
<div id="box-static">
  <h2 class='title-box'>Thống kê số liệu</h2>
  <div class="container">
    <label class="label" for="totalCount">Tổng số bài viết:</label>
    <span class="result" id="totalCount">Loading...</span>
  </div>
  <div class="container">
    <label class="label" for="labelCount">Số Template:</label>
    <span class="result" id="labelCount">Loading...</span>
  </div>
  <div class="container">
    <label class="label" for="pageCount">Tổng số trang:</label>
    <span class="result" id="pageCount">Loading...</span>
  </div>
  <div class="container">
    <label class="label" for="commentCount">Tổng số comment:</label>
    <span class="result" id="commentCount">Loading...</span>
  </div>
</div>
<script>
//<![CDATA[
  window.addEventListener('load', function() {
    // Lấy tổng số bài viết
    $.ajax({
      url: '/feeds/posts/default?alt=json',
      dataType: 'jsonp',
      success: function(data) {
        $('#totalCount').text(data.feed.openSearch$totalResults.$t);
      },
      error: function() {
        $('#totalCount').text('Đã xảy ra lỗi khi tải dữ liệu.');
      }
    });
    // Chọn một nhãn bất kỳ trên blog
    var label = 'Template';
    $.ajax({
      url: '/feeds/posts/default/-/' + label + '?alt=json',
      dataType: 'jsonp',
      success: function(data) {
        $('#labelCount').text(data.feed.openSearch$totalResults.$t);
      },
      error: function() {
        $('#labelCount').text('Đã xảy ra lỗi khi tải dữ liệu.');
      }
    });
    // Lấy số lượng trang
    $.ajax({
      url: '/feeds/pages/default?alt=json',
      type: 'get',
      dataType: 'jsonp',
      success: function(data) {
        $('#pageCount').text(data.feed.openSearch$totalResults.$t);
      },
      error: function() {
        $('#pageCount').text('Đã xảy ra lỗi khi tải dữ liệu.');
      }
    });
    // Lấy số lượng comment
    $.ajax({
      url: '/feeds/comments/default?alt=json',
      dataType: 'jsonp',
      success: function(data) {
        $('#commentCount').text(data.feed.openSearch$totalResults.$t);
      },
      error: function() {
        $('#commentCount').text('Đã xảy ra lỗi khi tải dữ liệu.');
      }
    });
  });
//]]>
</script>