Thống kê lượt xem-bài viết-bình luận cho Blog Của Bạn.

Hôm Nay Mình Sẽ Hướng Dẫn Các Bạn Cách Hiển Thị Thống Kệ Lượt Xem-Bài Viết-Bình Luận Cho Blog Của Bạn.

Bước 1: Các bạn vào Trang Tổng Quan > Bố Cục > Thêm Tiện Ích và chọn tiện ích Thống Kê Blog

  Bước 2: Vào phần Chủ Đề > Chỉnh sửa HTML > Chuyển đến tiện ích "Stats1" và tìm Đoạn Code sau:

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget>

  Hãy thay nó bằng đoạn code sau:

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>    <b:includable id='main'>  <b:if cond='data:title'><h2><data:title/></h2></b:if>  <div class='widget-content'>    <!-- Content is going to be visible when data will be fetched from server. -->    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>      <!-- Counter and image will be injected later via AJAX call. -->      <b:if cond='data:showSparkline'>        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>      </b:if>      <b:if cond='data:showGraphicalCounter'>        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>      <b:else/>        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>      </b:if><script type='text/javascript'>function postCount(json){document.write(&quot;<span class='counts post2'> Total Posts &quot;);var count = json.feed.openSearch$totalResults.$t;document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);document.write(&quot;</span>&quot;)}
function numberOfComments(json){document.write(&quot;<span class='counts comment'> Total Comments &quot;);var count = json.feed.openSearch$totalResults.$t;document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);document.write(&quot;</span>&quot;)}
</script><script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/><script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>

    </div>  </div></b:includable>  </b:widget>

 Bước 3: Chúng ta đã hoàn thành được 80% rồi giờ ta thêm CSS vào để nó đẹp lên nào. Tìm đến thẻ </Head> và thêm đoan code sau phía trên nó:

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/><link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> <style type='text/css'>/* Blogger Custom Stats widget by huyhoangit.com */.Stats img {display:none!important;background-image:none;}.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}.Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}.counts .count {display:inline-block;font-size:16px;height:30px;vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}.counter-wrapper.text-counter-wrapper:before, .counts:before {display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}.counts.post2:before {content:&quot;\f044&quot;;}.counts.comment:before {content:&quot;\f0e6&quot;;}#Stats1_content {width:auto;height:auto;background-color:#fff;}</style>

 Chú ý phần màu đỏ, nếu các bạn đã có thêm trên blog từ trước rồi thì có thể xoá bỏ nó khỏi blog. Chúc các bạn thành công!!