Using HTML to Format a StatCounter

Did you know that when you generate your StatCounter code, you can choose a “Counter Image” or a “Text Counter”?

Counter Image
With a “Counter Image”, you can choose the digit and background color of your StatCounter within your StatCounter account. You can also set the minimum number of digits to be displayed and choose a font style. Here are a few examples of the Counter Images available with StatCounter:

Sometimes though, members want to be able to further customize their StatCounters…

Text Counter
If you would like to format your StatCounter to your own specific requirements, you can choose a “Text Counter” when you generate your StatCounter code. With a Text Counter, you can format your counter using HTML. This way you can change the font, use borders, add background colors and images and create your very own unique StatCounter. Take a look at some of the examples that we created here…

Change the Counter Font Color
Add the following code to the source code of your website, on either side of your StatCounter code:
StatCounter Code

#0C4908 is the hexadecimal code for a dark green color - use any of the following hexadecimal codes to format your StatCounter:


#0C4908 #f3b044
#e3007b #acacac
#648dc7 #412700

Check out this link or this link for more hexadecimal color codes.

Change the Counter Font Size
Add the following code to the source code of your website, on either side of your StatCounter code:

StatCounter Code

25px indicates the size that you want for your counter in pixels. Here are some examples of pixel sizes:


10px 15px 20px 25px

You can experiment with different text sizes to find the most appropriate one for your site.

Bold the Counter Font
Add the following code to the source code of your website, on either side of your StatCounter code:

StatCounter Code

Italicize the Counter Font
Add the following code to the source code of your website, on either side of your StatCounter code:

StatCounter Code

Center/Left-Align/Right-Align your StatCounter
Add the following code to the source code of your website, on either side of your StatCounter code:

StatCounter Code
Example - Center
StatCounter Code
Example - Left-Align
StatCounter Code
Example - Right-Align

Change the Font of your StatCounter
Add the following code to the source code of your website, on either side of your StatCounter code:

StatCounter Code

You can experiment with various fonts to find which suits your site. Here are some examples:

arial verdana
helvetica arial black
courier courier new
georgia impact
palatino times new roman
trebuchet ms garamond

You can experiment with the following sample codes to create your very own unique StatCounter!

Thanks go to this post. If you have any suggestions or comments (or if you spot any errors in our codes!) please post below…

Posted in: HTML Tips-Tricks,Tips n Tools