Thư viện

Trải nghiệm

Thứ Năm, tháng 10 18, 2012

Nâng cấp tiện ích Thống kê blogger

Đây là phiên bản nâng cấp cho tiện ích Thống kê blog có sẵn của Blogger. Ngoài số lượt truy cập blog thì mình có thêm thống kê tổng số bài viết và tổng số nhận xét cho tiện ích này. Và dữ liệu cho 2 thống kê này được lấy từ feed với dung lượng nhỏ nhất. Vì sử dụng đến dữ liệu từ feed nên blog bạn áp dụng phải ở chế độ mở cho tất cả người đọc.

Chia sẻ:
Nâng cấp tiện ích Thống kê blog - Update widget stats
Đây là phiên bản nâng cấp cho tiện ích Thống kê blog có sẵn của Blogger. Ngoài số lượt truy cập blog thì mình có thêm thống kê tổng số bài viết và tổng số nhận xét cho tiện ích này. Và dữ liệu cho 2 thống kê này được lấy từ feed với dung lượng nhỏ nhất. Vì sử dụng đến dữ liệu từ feed nên blog bạn áp dụng phải ở chế độ mở cho tất cả người đọc.
Xem Demo: View Demo

☼ Cách tiến hành:
1- Đăng nhập vào Blog
2- Vào Mẫu (Template)
3- Chọn Chỉnh sửa HTML (Edit HTML):
4- Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin>  trong template của bạn.
#Stats1 ul{margin:10px 0;border:0;padding:0}
#Stats1 li{margin:0;border:0;background-color:#ff4e47;background-image:url(http://4.bp.blogspot.com/-XZduuMT_LHo/ULXP8xCwxpI/AAAAAAAAAUk/Qnkb5iQ5k40/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}
Trong đó:
  • background-color:#ff4e47 là màu nền của tiện ích.
  • font-size:13px là cỡ chữ mô tả trên tiện ích.
  • font-size:22px là kích cỡ của số đếm
  • color:#fff; Màu số đếm
  • color:#fff; màu chữ mô tả.
  • Nếu chưa có mã màu khác hãy tham khảo bảng mã màu của namkna Tại đây
5- Thêm tiện ích Thống kê blog tại nơi bạn muốn hiển thị (bỏ qua bước này nếu blog bạn đã có).
6- Vào Chỉnh sửa HTML (không chọn Mở rộng Mẫu Tiện ích) và tìm trong template từ khóa:
<b:widget id='Stats1' locked='false' title='Tổng số lượt xem trang' type='Stats'/>
- Thay thế nó bằng đoạn mã 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>
- Sửa lại các phần mô tả màu xanh theo ý muốn của bạn.
7- Lưu mẫu lại và xem kết quả nha,
Tùy phiên bản ngôn ngữ blog của bạn mà tiêu đề Tổng số lượt xem trang có thể khác nhau dẫn đến từ khóa tìm kiếm ở bước 3 cũng có sự khác biệt. Đây chính là tên của widget tổng số lượt xem trang mà các bạn thêm ở bước 5.
Nguồn: Duypham

14 nhận xét:

  1. Cảm ơn NK cô đã áp dụng thành công tiện ích này rồi , cô cảm ơn cháu rất nhiều . Chúc cháu luôn thnahf công

    Trả lờiXóa
    Trả lời
    1. Không có gì đâu cô ak. Cháu cũng chúc cô luôn khỏe mạnh và thành công trong công việc:)

      Xóa
  2. SAO BLOG CUA MÌNH NÓ HIỂN THỊ THIẾU ẢNH CỦA PHẦN BÀI ĐĂNG THẾ NAM ƠI
    http://network9x.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. mÌNH chưa rõ câu hỏi của bạn lắm. hiện tại mình vào thấy vẫn hiển thị ảnh mà. Trừ những bài viết không tải ảnh trực tiếp lên blog là khong hiển thị thôi bạn ak.

      Xóa
    2. bạn để ý cái 3 cái hình ảnh ở trước ý,có cái ảnh của số của bìa viết nó không hiên thị :(

      Xóa
    3. Các bài viết mà bạn nói đều có ảnh. bạn có thể chụp hình ảnh đó lên đây được không/

      Xóa
    4. ý mình là cái ảnh chỗ thống kê ý ảnh này nè https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-ash3/1175109_357852111013841_585841394_n.jpg

      Xóa
    5. Bạn tìm đoạn code bên dưới:
      #totalComments{background-position:0 -68px}

      THêm vào trước nó đoạn code sau:

      #Stats1_totalPosts{background-position:0 -1px}

      Nhớ chỉnh lại thuộc tính background-position:0 -1px cho phù hợp nha.

      Xóa
    6. cảm ơn bạn,
      mình đã làm nhue bạn nói mà vẫn không được :(
      hic

      Xóa
    7. NGuyên nhân là do sidebar của bạn chứa thuộc tính position
      Bạn gửi tem vào tavannam01@GMAIL.COM MÌNH CHỈNH CHO NHA,

      Xóa
  3. m gửi rồi đó., giúp m nha

    Trả lờiXóa
    Trả lời
    1. Bạn sửa đoạn

      <li>
      <h4 id='Stats1_totalPosts'>&hellip;</h4>
      <span>Posts</span>
      </li>

      thành:

      <li id='Stats1_totalPosts1'>
      <h4 id='Stats1_totalPosts'>&hellip;</h4>
      <span>Posts</span>
      </li>

      và thêm vào trước đoạn:

      #totalComments{background-position:0 -68px}

      THêm vào trước nó đoạn code sau:

      #Stats1_totalPosts1{background-position:0 -1px}

      Nhớ chỉnh lại thuộc tính background-position:0 -1px cho phù hợp nha.

      - Hiện mình đã gửi lại bản chỉnh sửa vào mail cho bạn rồi nha.

      Xóa
  4. Sao cái chỗ "Lượt xem trang" nó nhỏ vậy anh ?

    Xem

    Trả lờiXóa