Change visitor counter style - choose another counter design

How to change the style of an existing visitor counter

If you already use a visitor counter from Counter.gratis, you do not have to create a new counter just to change its design. In most cases, you only have to change the STYLE value in your existing counter code.

The important rule is simple: keep your own counter ID unchanged and replace only the style number. Your counter value and statistics remain assigned to the same counter.

Where do you find the available counter styles?

Open the Counter EXTRA page. You will see many counter designs. Move the mouse over a design and read its tooltip, for example Counter Style 313.

The number at the end is the style number. In this example, the style number is 313.

Counter Style 313  ->  STYLE=313
Counter Style 0    ->  STYLE=0
Counter Style 108  ->  STYLE=108

The current compact visitor counter code

The examples below use the current compact embed code. It avoids an unnecessary first counter request and should be copied as a complete block.

<!-- Traffic Counter https://counter.gratis BEGINN -->
<a href='https://counter.gratis/?language=en&ID=example.com' target='_top'>
<img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' id='cg_example.com' alt='Free Counter' title='Counter Statistics'>
<noscript><img src='https://besucherzaehler.gratis/counter.php?ID=example.com&STYLE=0' alt='Free Counter' title='Counter Statistics'></noscript>
</a>
<script>(function(i,c){i.src=c
+'&LANG='+encodeURIComponent(navigator.language)
+'&RES='+screen.width+'x'+screen.height
+'&REF='+encodeURIComponent(document.referrer)
+'&LOC='+encodeURIComponent(location.href)
+'&NAVI='+encodeURIComponent(navigator.userAgent)
})(document.getElementById('cg_example.com'),'https://besucherzaehler.gratis/counter.php?ID=example.com&STYLE=0')</script>
<!-- Traffic Counter https://counter.gratis ENDE -->

Change the STYLE value

To change the design, replace the old style number with the new one. For example, change STYLE=0 to STYLE=313.

STYLE=0
becomes:STYLE=313

The modified counter code then looks like this:

<!-- Traffic Counter https://counter.gratis BEGINN -->
<a href='https://counter.gratis/?language=en&ID=example.com' target='_top'>
<img src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==' id='cg_example.com' alt='Free Counter' title='Counter Statistics'>
<noscript><img src='https://besucherzaehler.gratis/counter.php?ID=example.com&STYLE=313' alt='Free Counter' title='Counter Statistics'></noscript>
</a>
<script>(function(i,c){i.src=c
+'&LANG='+encodeURIComponent(navigator.language)
+'&RES='+screen.width+'x'+screen.height
+'&REF='+encodeURIComponent(document.referrer)
+'&LOC='+encodeURIComponent(location.href)
+'&NAVI='+encodeURIComponent(navigator.userAgent)
})(document.getElementById('cg_example.com'),'https://besucherzaehler.gratis/counter.php?ID=example.com&STYLE=313')</script>
<!-- Traffic Counter https://counter.gratis ENDE -->

Keep your own counter ID

Do not replace your own counter ID with the example ID shown on this page. If your current counter uses ID=my-website.com, keep exactly that ID.

ID=example.com is only an example.
Your own ID might be: ID=my-website.com

Changing the ID may point to a different counter. If you only want a new design, change only the STYLE value.

Why does STYLE appear twice?

In the current embed code, STYLE appears twice: once in the <noscript> fallback and once in the JavaScript counter URL. Change the same style number in both places.

<noscript> ... STYLE=313 ... </noscript>
...
'https://besucherzaehler.gratis/counter.php?ID=example.com&STYLE=313'

Do not replace the transparent data:image/gif... placeholder with a counter URL. The placeholder is intentional and prevents the browser from sending an additional counter request before JavaScript supplies the complete request.

The STYLE parameter uses normal numbers

For the normal visitor counter, STYLE is a number, for example:

STYLE=0
STYLE=108
STYLE=313
STYLE=598

Choose the number on the Counter EXTRA page and use it for both STYLE values in your own counter code.

What does not change?

Changing the style only changes the visible design of the counter image. The counter value, reload protection and statistics continue to work as before.

Same ID       -> same counter value
New STYLE     -> new visual design

Short version

Keep your ID unchanged. Replace only the STYLE number in the two STYLE positions of the current counter code. Leave the rest of the embed unchanged.

Old style:STYLE=0

New style:STYLE=313

Counter.gratis

Free visitor counter for your homepage - 100% free