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…
The Basics
Here are some simple HTML codes you can use to customize your StatCounter. Note that there are several different ways to achieve the effects that we describe – we’re just showing a selection of techniques here.
Note also that while we are using HTML codes, formatting your website using CSS usually produces a better result. It’s generally accepted that CSS is a more powerful and efficient method of applying formatting to a website.
Further, some of the tags we are using here such as <font> have been “deprecated” – this means that these tags have been superseded and are no longer recommended for use by the W3C. That said, these tags (currently) continue to be generally recognized and supported globally.
- Change the Counter Font Color
Add the following code to the source code of your website, on either side of your StatCounter code:
#0C4908 is the hexadecimal code for a dark green color – use any of the following hexadecimal codes to format your StatCounter:
#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:
25px indicates the size that you want for your counter in pixels. Here are some examples of pixel sizes:
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:
Italicize the Counter Font
Add the following code to the source code of your website, on either side of your 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:
Change the Font of your StatCounter
Add the following code to the source code of your website, on either side of your StatCounter code:
You can experiment with various fonts to find which suits your site. Here are some examples:
helvetica arial black
courier courier new
georgia impact
palatino times new roman
trebuchet ms garamond
Full Examples
You can experiment with the following sample codes to create your very own unique StatCounter!
 |
<font face="Verdana" color="#800080"><b> <!– Start of StatCounter Code –> <script type="text/javascript"> var sc_project=4296912; … …</a></div></noscript> <!– End of StatCounter Code –> </b></font></div> |
 |
<tr><td align="center" valign="middle"> <font color="#000080"> <div style="font-size:30px;"><b> <!– Start of StatCounter Code –> <script type="text/javascript"> var sc_project=4296912; … …</a></div></noscript> <!– End of StatCounter Code –> </b></div></font></td></tr></table> |
 |
<tr><td align="center" valign="middle"> <table border="1" bgcolor="#d2a6c7"> <tr><td align="center" valign="middle"> <table border="1" width="45px" bgcolor="#aa99c5"> <tr><td align="center" valign="middle"> <font color="#5c3e90"><b> <!– Start of StatCounter Code –> <script type="text/javascript"> var sc_project=4296912; … …</a></div></noscript> <!– End of StatCounter Code –> </b></font></td></tr></table> </td></tr></table> </td></tr></table> |
 |
<!– Start of StatCounter Code –> <script type="text/javascript"> var sc_project=4296912; … …</a></div></noscript> <!– End of StatCounter Code –> </b><br/><br/><br/></font></td></tr></table> |
 |
<!– Start of StatCounter Code –> <script type="text/javascript"> var sc_project=4296912; … …</a></div></noscript> <!– End of StatCounter Code –></font></td></tr></table> |
 |
<!– Start of StatCounter Code –> <script type="text/javascript"> var sc_project=4296912; … …</a></div></noscript> <!– End of StatCounter Code –></ins></b></font></div></td></tr></table> |
 |
<!– Start of StatCounter Code –> <script type="text/javascript"> var sc_project=4296912; … …</a></div></noscript> <!– End of StatCounter Code –> </font></td></tr></table> |
If you have any suggestions or comments (or if you spot any errors in our codes!) please post below…
thanks a lot. super blog
Very useful indeed!!
Thank you SC!!
Thanks alot .. I tried this service it’s really very good one…
——————————
Thanks
Ramy
htt://www.ramoree.com
ah ha. To be honest I must have completely skimmed over those disclaimers. Sorry about the ranting. I understand the desire to keep tutorials simple, however I still feel that CSS is an important and very useful thing for even web novices to know how to use. Keep up the good work & useful blog posts.
StatCounter Team Response:
No problem Marcos – and many thanks for writing up some of the CSS for us too!
StatCounter, your counter is great, but the HTML you demoed is horribly outdated. The font tag was deprecated as of HTML 4.01 back in 1999: http://www.w3.org/TR/REC-html40/present/graphics.html#edef-FONT and there are numerous articles online suggesting why not to use it on your web site: http://style.cleverchimp.com/font_size/livetext.html
A better way of doing things would be to use some simple CSS. For people interested in learning CSS I would recommend checking out HTML dog: http://htmldog.com/guides/cssbeginner/
StatCounter, could you please add a 3rd column to your sample code that uses CSS? I even coded up the first two examples for you π http://gist.github.com/36436
StatCounter Team Response:
Thanks for your comment Marcos… but did you notice what we said in the blog post?
We have not added the CSS codes as we feel this would overly complicate the post – it’s designed to illustrate ideas and suggestions only. Anyone who wants to use CSS is more than welcome to do so!
Just another reason to love this free service! Thanks, Statcounter…
Oh dear, it is still stripping out markup. Slightly odd on a tech blog. Slightly embarrassing for me! π
Oh dear, the comments form seems to have stripped some of my comment. ;-P
I meant to say: “use instead of ”
And something like:
var sc_project=4296912; β¦
β¦
Following on from the comment by Paul Hastingas above, I’m very surprised at the rather dated HTML markup you have suggested.
There are several examples of poor practice, including: using tables for design purposes; using
instead of; and using the “font color” attributes instead of CSS.The fundamental insight of CSS, which all web designers now accept, is that it is preferable to keep the design and content aspects of the code/markup separate. It reduces load times; ensures that the site can be read easily whatever the platform; allows easy indexing by search engines; and makes alterations to the style much much easier.
I would recommend something like:
var sc_project=4296912; β¦
β¦
… and then style the counter in the CCS file, thus:
div.statcounter {color: ##800080 font-face: Verdana, sans-serif; }
Perhaps you could provide the full CSS for the other examples too, and add them to the table?
That was cool and informational.. actually people can ow copy this code and can juz change the values if they like π Actually I did’nt even think of customizing stats.. π
Great tips, I didn’t realise we could customise the counters, ty.
Thanks for the info to be able to customize StatCounter……..the examples look Cool π
wowwwww this is very very awesomeeeeeee!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Nice tips. π
Thanx!
thanks
i will try it
Thanks for the tips. I have never tried customizin it.
If you want to center your counter but still be XHTML compliant, then don’t use <center> tags. Instead use:
<div style=”text-align:center”>counter code<div>
If I you guys don’t post about this, I guess I will stuck with the usual method forever… limiting my creativity to create a cool web counter. Thanks for the tips!
I guess I have never taken the time to look into customizing my code. I like the idea of the custom picture that can be added!
The PPC networks have jaded me from changing code!
Well, I have a suggestion for you, since it’s something you can easily track too :
As an option, display instead the number of visitors presntly connected to the website.
Very few counters allow that, it would be interesting if you offered that service, in my opinion π
Congratulations BTW,
Olivier