Hướng dẫn tùy biến tiện ích Thống kê đẹp mắt cho Blogger (Blogspot)

     Với tiện ích Thống Kê Lượt Truy Cập mặc định của Blogger, bạn chỉ có thể thêm được tiện ích thống kê truy cập toàn trang, nhưng theo yêu cầu của khách hay bạn thì bạn muốn có cả thống kê về số bài viết và số lượt bình luận. Vì vậy, hôm nay mình sẽ hướng dẫn các bạn Tùy Biến tiện ích Thống kê Blogger.

Tùy biến tiện ích Thống kê đẹp mắt cho Blogger (Blogspot)

Hướng dẫn tùy biến tiện ích Thống kê Blogger (Blogspot)

1. Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML >> Tìm đến dòng ]]>< Sau khi tìm xong, các bạn sao chép hoàn toàn code sau vào trước thẻ ]]><

#Stats1 ul{margin:10px 0;border:0;padding:0}
#Stats1 li{margin:0;border:0;background-color:#ff4e47;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqo0aY0N8ypCdQNs7CpfIPFGyptHCjbCt1Q_NN4zbZ0sj0gp3p8goU_-PhCwul8-33Zh8YSMrAbgn4mST4cGSE0fNZRWZDquR-Apb1AgFO1ALpCwAHZig_DWXEhyphenhyphenjW1CzsYH9Ue_JVrlY/s1600/sprites-stats-namkna-blogspot-com.png);background-repeat:no-repeat;padding:10px 10px 10px 80px;list-style-type:none}
#Stats1 h4{margin:0;font-size:22px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:13px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

Tùy chỉnh

Các bạn thay đổi các thông số và đường link được bôi màu ở trên.

2. Sau đó các bạn vào Bố Cục >> Thêm tiện ích Thống Kê Blog.

Lưu ý: Bạn nên nhớ cái tên bạn đặt cho tiện ích, để các bước sau không gặp lỗi.

3. Các bạn vào lại Mẫu >> Chỉnh sửa HTML >> nhấn Ctrl + F hoặc tìm đoạn code:

<b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats'/>

Lưu ý rằng: title='Tổng số lượt xem trang' là tên bạn đặt cho tiện ích ở bước 2.
4. Thay thế nó bằng đoạn code dưới đây:

<b:widget id='Stats1' locked='false' title='' type='Stats'>
  <b:includable id='main'>
    <div class='widget-content'>
      <ul>
        <li>
          <h4 id='Stats1_totalPosts'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;hellip;</h4>
          <span>Pageviews</span>
        </li>
      </ul>
      <script type='text/javascript'>
//<![CDATA[
function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>');
//]]>
      </script>
    </div>
  </b:includable>
</b:widget>

7. Thay đổi phần mô tả màu đỏ trong đoạn code trên.

Nguồn bài viết :
Bài viết được phát triển bởi tôi - Admin Hiếu.
Nguồn Code: http://www.terocket.com/

Đó là toàn bộ thủ thuật, chúc các bạn thành công !
Hãy để lại bình luận nếu thắc mắc. 

Chào thân ái !