Tạo widget thống kê cho blog của bạn

Trên blog của bạn sẽ có những số liệu như số bài viết, số bình luận, tổng lượt xem trang mà bạn muốn tổng hợp lại và công khai cho mọi người cùng biết, hôm nay mình sẽ hướng dẫn các bạn thực hiện điều đó với CSS và tiện ích Thống kê blog của Blogger.

#Thêm tiện ích thống kê blog

1. Đăng nhập Blogger

2. Bố cục > Thêm tiện ích > Thống kê blog

3. Bạn hãy cài đặt như dưới

Nếu bạn đã có sẵn tiện ích này rồi thì thôi, không cần thêm nữa.

#Thêm CSS

1. Mẫu > Chỉnh sửa HTML

2. Tìm thẻ ]]></b:skin>

3. Dán code dưới vào trên thẻ mà bạn vừa tìm

/* Thống kê blog */
# Stats1 ul {margin: 0px 0; border: 0; padding: 0}
# Stats1 7px; text-decoration: none; text-shadow: none; margin: 0 1px 1px 0; font-size: 12px; list-style-type: none}
# Stats1 h4 {margin: 0; font-size: 18px; line-height: 1.2em; color: # fff; text-shadow: none}
# Stats1 khoảng {font-size: 12px; color: # fff; text-shadow: none}
#totalComments {background-position: 0 -68px}
#totalCount {background-position: -136px 0}

#Thêm HTML

1. Tại phần chỉnh sửa HTML hãy chuyển tới tiện ích Stats1

2. Mở rộng toàn bộ code ra

3. Bạn hãy thay toàn bộ code được bôi đen trong hình thành code dưới

<b:widget id='Stats1' locked='false' title='Thống Kê Blog' type='Stats'>
    <b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
    <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>

Bên dưới là ảnh chụp sau khi thay code

4. Lưu lại.

tipstrikblogging