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…

Comments are closed.

Try Statcounter free for 30 days

No credit card required. Downgrade to the free plan anytime.

Try it for FREE!