Thursday, December 20, 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.

Cách Thực Hiện :
1.Đăng nhập vào Blog
2.Tùy chọn (Mũi tên xuống)
3.Chọn bố cục
4. Chọn Phần tử trang --> Thêm tiện ích
5.Thống kê Blogs --> Chọn kiểu đầu tiên
6.Chọn Mẫu --> Mở rộng tiện ích
Tìm đoạn code sau (F3) 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWw14WfN0iqb0UdOEJOeDR8QOPADSHeQTNckv_qAWgAmEnh1cWzRC6seR-7B4asQPU-ai5oQuvSMXHU6-fwds_aVSl0Gl_dGIcXQ0u8HPDyWUQ4NyzPCx7lKBfpENuC8G32m3ju7kVJzA/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: #ffsau4e47 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ả.


7.Lưu lại và sau đó bỏ chọn mở rộng 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.
8- Lưu mẫu lại và xem kết quả nha.

No comments:

Post a Comment

Popular Posts