Real-time Visitors Counter Widget

Introduction

Yea, I know, I know. There are lots of visitor counters out there which is free and easy to install. But, does it look good in your theme? Is it cuztomizable? No. So basically today I'm going to share my favorite real-time visitor counter which is free and easy to add on your site with a global traffic tracking.

Most of us had used whos.amung.us widget even once, and just like you for some time I've sticked to it because it has cool feats, however the look & feel doesn't won't fit with my template, the counter doesn't look good for me so I decided to look for another counter until I found freehostedscripts.net widget, I immediately switched to it probably because it gives me a complete text html which is easy to customize and has the same cool features as who.amung.us.

Features

Real-Time counter
30-day Statistics
OS and Browser used
Screen sizes used
Visitor Duration
Countries of Visitor are from
Current Page Visitors are on
Traffic Referrers

Generate Code

Follow this link.
Customize what the counter says when an audience visits in your own language by changing Online User on the input.
Next, click on generate code, copy the generated code and go to blogger dashboard.

Add to your site

Once you're on blogger dashboard go to » Layout » Add Gadget » Choose HTML/Javascript gadget.
And paste the code inside text the html input.
Hit Save and you're done.

Customization

For customization, edit the HTML gadget where you pasted the code.

#1 - Pure Text

We have 34 visitors online.

Look for <span id='o_"+fhs_id+"'></span>
Replace it with We have <span id='o_"+fhs_id+"'></span> online.

#2 - With Icon Font

16 visitors online.

Look for <span id='o_"+fhs_id+"'></span>
Replace it with <i class='ion-connection-bars'></i> <span id='o_"+fhs_id+"'></span>.
Note: Replace Icon font's class with your own.

#3 - With Background

27 visitors online

Look for <span id='o_"+fhs_id+"'></span>
Replace it with <span class='mba-count1'><span id='o_"+fhs_id+"'></span></span>
Add this CSS code after the </script> end tag.

<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>

That's it for now, be creative and as always Happy Blogging! ;)