Code thống kê blog với style IPB cho Blogspot

Thống kê blog giống forum vbb.Hiện tại có rất nhiều cách để tạo widget thống kê cho blog. Bài viết này chỉ góp thêm chút hương sắc cho vườn hoa khoe sắc này thôi. Code thống kê blog với style IPB giống forum này lấy cảm hứng từ thống kê của mã nguồn IPB forum. Code này có thể đếm số lượng bài viết, đếm số lượng nhận xét và đếm số lượng người đang online. Theo kinh nghiệm sử dụng lâu nay của mình thì code đếm số lượng người đang online này rất chính xác nên các bạn cứ yên tâm mà sử dụng.

Bước 1: Thêm code CSS

Bước này là để trang trí cho widget thêm đẹp và có style IPB. Anh em có thể trang trí theo kiểu khác hoặc đơn giản hơn không trang trí cũng được không sao .

Vào template và kiếm ]]></b:skin> sau đó thêm trên nó đoạn code sau:

Code

1. .statround {  
2.         background: none repeat scroll 0 0 url(rgba.php?r=0&g=0&b=0&a=25);background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1); _filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000);      
3.         color: #222222;    
4.         display: inline-block;    
5.         font-weight: bold;    
6.         margin-right: 3px;    
7.         padding: 3px 7px;    
8.         text-shadow: 0 0 0 transparent, 0 1px 0 rgba(255, 255, 255, 0.6);
9.         border-radius: 3px 3px 3px 3px;
10.                 -webkit-border-radius: 3px 3px 3px 3px;
11.                 -moz-border-radius: 3px 3px 3px 3px;
12.                 -khtml-border-radius: 3px 3px 3px 3px;    
13.         box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 #FFFFFF;
14.                 -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0#FFFFFF;
15.                 -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0#FFFFFF;
16.                 -khtml-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0#FFFFFF;
17. }

Bước 2: Đăng ký code thống kê

Code thống kê blog với style IPB sử dụng đoạn mã script do http://freeonlineusers.com/ cung cấp nên bạn phải đăng ký một tài khoản và thêm vào code. Thực hiện theo các bước sau.

1. Nhấn Sign up. Điền đầy đủ thông tin vào form đăng ký (hình). Sau đó bạn sẽ nhận một email để xác nhận. Bạn check mail và click vào đường link để kích hoạt tài khoản.

2. Bạn nhấn vào Link code. Bạn điền địa chỉ blog vào ô Add new domain/site. Nhấn Add

3. Ứng với mỗi blog bạn được cung cấp 1 đoạn mã. Nhấn nút Generate code.

4. Bạn sẽ được cung cấp một đoạn code như trong ảnh. Bạn không cần phải chép toàn bộ code. Chỉ cần lấy số id gồm 7 chữ số được đánh dấu trong ảnh.

Bước 3: Thêm code Javascript

Đây là code chính của widget. Bạn vào Layout tạo 1 widget HTML và paste đoạn code dưới đây vào blog. Nếu rành về cấu trúc Templates bạn có thể chèn code trực tiếp vào Templates XML ngay vị trí cần hiển thị.

Code

1. <script style="text/javascript">
2. function numposts(json) { document.write('' +json.feed.openSearch$totalResults.$t + ''); }function numcomments(json) {document.write('' + json.feed.openSearch$totalResults.$t + ''); }
3. </script>
5. <div style="text-align: center;">
7. <span class="statround">
8. <script src="http://thu-thuablog.blogspot.com/feeds/posts/default?alt=json-in-script&callback=numposts"></script></span>
10. <span>Bài viết</span>
12. <span class="statround">
13. <script src="http://thu-thuatblog.blogspot.com/feeds/comments/default?alt=json-in-script&callback=numcomments"></script></span>
15. <span>Nhận xét</span>
17. <span class="statround">
18. <script type="text/javascript" src="http://st2.freeonlineusers.com/on3.php?id=xxxxxxx"></script></span>
20. <span>Đang online </span>
22. </div>

Bước 4: Các thông số tùy chỉnh

- Thay xxxxxxx là mã số id bạn bằng 7 chữ số đăng ký được ở bước 2

- Thay thu-thuatblog.blogspot.com thành địa chỉ Blogger của bạn.  Lưu ý : Code trên có 2 chỗ có domain thu-thuatblog.blogspot.com nên bạn cần thay 2 lần.

Sau khi thêm code thống kê vào blog bạn cần chờ đợi khoảng vài phút để bộ máy thống kê bắt đầu thu thập thông tin và hiển thị lên blog.