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…

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:

      <font color="#0C4908">StatCounter Code</font>

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

      <div style="font-size:25px;">StatCounter Code</div>

    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:

      <b>StatCounter Code</b>

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

      <ins>StatCounter Code</ins>

    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:

      <center>StatCounter Code</center>

      Example – Center

      <div style="text-align:left;">StatCounter Code</div>

      Example – Left-Align

      <div style="text-align:right;">StatCounter Code</div>

      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:

      <font face="arial">StatCounter Code</font>

    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

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

<div style="font-size:32px;">
<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>

<table background="snow.jpg" width="75px">
<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>


<table border="1" bgcolor="#9781b7">
<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>


<table background="molly.jpg" width="100px"><tr><td align="right"><font color="#ffffff"><b>
<!– 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>


<table border="10" bordercolor="#0C4908" cellpadding="0" cellspacing="0"><tr><td><font color="#0C4908" face="impact">
<!– Start of StatCounter Code –>
<script type="text/javascript">
var sc_project=4296912; …
…</a></div></noscript>
<!– End of StatCounter Code –></font></td></tr></table>

<table border="3"><tr><td><div style="font-size:8px;"><font face="courier"><b><ins>
<!– 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>

<table align="left" valign="middle" bgcolor="#ed717a"><tr><td><font face="comic sans ms" color="#ffffff">
<!– Start of StatCounter Code –>
<script type="text/javascript">
var sc_project=4296912; …
…</a></div></noscript>
<!– End of StatCounter Code –>
</font></td></tr></table>


Thanks go to StatCounter Team member Rory for his assistance with this post.

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

This entry was posted in Features. Bookmark the permalink.

37 Responses to Using HTML to Format a StatCounter

  1. Olivier says:

    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

  2. six pack abs says:

    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!

  3. 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!

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

  5. Jacob says:

    Thanks for the tips. I have never tried customizin it.

  6. نور says:

    thanks
    i will try it

  7. KoPPePaN says:

    Nice tips. :)
    Thanx!

  8. Anang says:

    wowwwww this is very very awesomeeeeeee!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

  9. SEO says:

    Thanks for the info to be able to customize StatCounter……..the examples look Cool :)

  10. SEO Design says:

    Great tips, I didn’t realise we could customise the counters, ty.

  11. 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.. :)

  12. Robert says:

    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?

  13. Robert says:

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

  14. Robert says:

    Oh dear, it is still stripping out markup. Slightly odd on a tech blog. Slightly embarrassing for me! :-)

  15. FRB says:

    Just another reason to love this free service! Thanks, Statcounter…

  16. 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?

    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.

    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!

  17. 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!

  18. Ramy says:

    Thanks alot .. I tried this service it’s really very good one…

    ——————————
    Thanks
    Ramy
    htt://www.ramoree.com

  19. TechPark says:

    Very useful indeed!!
    Thank you SC!!

  20. htmlmekani says:

    thanks a lot. super blog

  21. We are using statcounter last one and half year and statcounter did tremandous jobs for regarding our website analysis and watch day by day. Nicely categories in statcounter like popular pages,recent keyword analysis,recent visitor activity etc. It will be very helpful for me and our websites. Valuable thankful to statcoutner team.

    Catherine Smith

  22. Turkey says:

    I am new in stat counter so this information is useful for me, thanks for examples!

  23. Charles says:

    Hi,

    Your comments were closed for the installation Post, so I hope you don’t mind my asking you something here.

    Like lim yew yi, I have a friend who has the gadget installed on her blog, but only the title shows. Of course the stats are captured fine, but the counter itself does not show. I’ve dinked around with it, and can get nothing more, even using just the text counter.

    Blogger is inserting an attribute into the the script tag ‘style=”display: none;”‘ I’ve tried altering the CSS, but they are doing it via javascript. I’ve even doubled the attribute in the code and that doesn’t work, as well as enclosing the code in an additional div element. Do we need to use a CDATA section? Could you perhaps insert a timer into the gadget to kick javascript after Blogger’s code runs to remove the attribute?

    Any help or suggestions would certainly be appreciated.

    PS. I’ve been running StatCounter for well over a year with no problems, but I use the old blogger that only has templates. :D

  24. tr.gg says:

    thanks. super info

  25. alper says:

    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!

    ——————————
    thanks
    http://www.troysan.com

  26. Adsense Tips says:

    thanks mate for the article i never thought i could customize like this

  27. Stat Counter is excellent for tracking indivual visitors for free which no other free package could come near to.

    Collective reports can be made more powerful by allowing viewing customizations to webmasters.

  28. Nick Pelling says:

    Hmmm… CSS is now an absolutely central part of the whole Web 2.0 thing, so I’m somewhat mystified why the (otherwise quite sensible) StatCounter blog treats it so emptily here. Using tables to style your visitor counter (as most of your examples here do) is just wrong on so many levels!

    Please revisit this topic with a post on CSSifying statcounters for bloggers as soon as you can!

    StatCounter Team Response:

    Hi Nick,

    We’ve already responded to a similar comment above – please check it out here.

    Many blogs do not allow the use of CSS but do allow the use of HTML formatting, therefore, providing CSS codes could create confusion.

    We felt that adding CSS codes would overly complicate the post – but anyone with a working knowledge of CSS is, of course, more than welcome to use it to format a StatCounter if they wish. Our post is meant to illustrate ideas only.

  29. Nick Pelling says:

    I totally agree that you can indeed produce nice-looking stats boxes from raw HTML – on my blog, I’ve put together my own (HTML table-based) visitor stats box to mimic the FeedBurner readers stats box. This, after all, is basically what most bloggers would like their stats to look like.

    But all the same, I think you’d have to agree that this kind of formatting hackery should really be done with a slab of industrial-strength CSS, right? ;-)

    Cheers, ….Nick Pelling…. // Cipher Mysteries

  30. alimusakhan says:

    i musa want to go to statcounter.com website directly

  31. Stat Counter is excellent for tracking indivual visitors for free which no other free package could come near to.

    Collective reports can be made more powerful by allowing viewing customizations to webmasters.

  32. celeb pics says:

    Thank you for the post.

  33. actress says:

    i’ll try,nice tips.
    thanx.