Real-time Visitors Counter Widget

Hi mọi người, sau một hồi tìm kiếm google mình tìm thấy bài viết chia sẽ nội dung này cũng khá hay, nên mình đem về chia sẽ lại cho những người nào chưa biết về thủ thuật này. Nó là một dạng đếm số lượng người truy cập thật cho người dùng internet, cũng khá hay và mình có thể tùy biến cho người dùng khi thêm vào website / blog của mình nhé.

Như mình biết thì trên internet hiện tại thì có rất nhiều chương trình đếm số lượng người online như who.amung.us, nhưng với chương trình đó thì các bạn khó tùy biến mẫu ưa thích với các bạn. 

Nhưng với thủ thuật này thì các bạn có thể tùy biến được mẫu người xem rất phù hợp. 

Và những đặc trưng bên dưới.

• Bộ đếm thời gian thực
• Thống kê trong 30 ngày
• Hệ điều hành và trình duyệt được sử dụng
• Kích thước màn hình được sử dụng
• Thời lượng của khách truy cập Quốc gia
• của khách truy cập đến từ
• Trang hiện tại Khách truy cập trên
• Người giới thiệu lưu lượng truy cập

Chúng ta bắt đầu nhé.

Bước 1 : Các bạn vào trang này để tạo mã.

Bước 2 : Copy đoạn mã các bạn vào tạo xong bỏ vào vị trí bạn muốn hiển thị trên website / blog.

Nếu các bạn sữ dụng blogger thì có thể vào trang tổng quan truy cập vào mục Bố Cục tiếp theo đó Chọn Tiện Ích HTML / Javascript và dán đoạn code bạn vừa tạo vào đó.

Và nhấn lưu để hoàn tất.

TÙY BIẾN CODE

Nếu các bạn muốn làm đẹp đoạn mã trên khi hiển thị ở ngoài website/blog đẹp hơn thì có thể thêm những tùy biến sau.

Mẫu 1 : Dạng văn bản thuần túy.

Hãy tìm

<span id='o_"+fhs_id+"'></span> 

Và thay thế đoạn code trên bằng đoạn code này :

<span id='o_"+fhs_id+"'></span> trực tuyến

Mẫu 2 : Dạng phong chử và biểu tượng

Các bạn tìm đoạn code sau :

<span id='o_"+fhs_id+"'></span> 

Và thay thế nó thành đoạn code dưới :

 <i class='ion-connection-bars'></i> <span id='o_"+fhs_id+"'>< /span>.

Mẫu 3 : Dạng có nền

Tìm đoạn code sau :

<span id='o_"+fhs_id+"'></span>

Và thay code đó thành :

<span class='mba-count1'><span id='o_"+fhs_id+"'></span></span >

Và bước cuối cùng các bạn thêm đoạn CSS này vào nữa là xong.

<style>
.mba-count1 {display: inline-block; padding: 5px 10px; color: #fff; background: #333; border-radius: 3px;}
.mba-count1:before {display: inline-block; content: ''; width: 7px; height: 7px; border-radius: 7px; background: #ee6e73; margin: 0 10px 0 0;}
.mba-count1 a {pointer-events: none; color:inherit; display: inline; text-decoration: none;}
</style>

DEMO TẠI TẠI BÀI VIẾT NÀY

Chúc các bạn thành công với thủ thuật đơn giản và cực hay này.

Theo : Mybloggeraide