WIDGETS

Visitor Counter Widget

Preview

(This is my own site visit count.)

About

This is a visitor counter widget for Neocities users. It simply gets the "views" data of target user and displays it.

This widget is based on a tutorial here: https://dannarchy.com/tut/tut_002

Proxy errors were fixed using this guide: https://pastebin.com/raw/dw7s2Th3

Version: 5.0
File (iFrame page) Size: 3.08KB

How To Add?

Adding the widget:

Insert this iFrame line between <body> and </body>.

<iframe src="https://404city.neocities.org/widget/visitorCounterV5?sitename=YOUR_SITENAME_HERE&css=YOUR_CSS_URL_HERE#digit-6" width="300" height="100" frameborder="0" scrolling="no" title="Visitor Counter"></iframe>

After that, replace the YOUR_SITENAME_HERE placeholder with your own Neocities sitename. Example => ?sitename=404city
The visitor count will be displayed on this iFrame.

Adding Custom CSS:

To add custom styling to your widget's iFrame content, create a new CSS file on your site (for example, visitorCounter.css) for the widget's stylesheet.
Then, replace the YOUR_CSS_URL_HERE placeholder in your iFrame URL with your CSS file's URL.
Example => &css=https://mysite.neocities.org/assets/css/visitorCounter.css

Changing The Digit Count

You can change the #digit-6 fragment on the URL to change the digit count of the visitor counter. For example, to have 5 digits, you'll have to change the fragment to #digit-5.
However, don't set it too low. Otherwise, some of the most significant digits might disappear, and the counter will look like it has been reset after reaching high values.
This visitor counter can hold a maximum of 9 digits.

ID and Class Information:

Here are the ID and Class selectors of the visitor counter's elements. You can use them on your own visitor counter CSS file to customize your visitor counter.

ID/Class	Element Type	Description
#visitorCounter	html	Main body of the visitor counter.
#visitorCounter::before	pseudo-element	"You are visitor:" text.
#visitorCounterDisplay	body	The flexbox which contains every digit box.
.digit	div	General class for the each digit box.
.digit::before	pseudo-element	Numbers in the each digit box.

Bonus:
If you wanna use background images instead of plain text for the numbers, you can use this simple structure in your CSS file:

.digit::before {content: none;}
.digit[data-n="#"] {background-image: url("IMAGE_URL_FOR_NaN")}
.digit[data-n="0"] {background-image: url("IMAGE_URL_FOR_0");}
.digit[data-n="1"] {background-image: url("IMAGE_URL_FOR_1");}
.digit[data-n="2"] {background-image: url("IMAGE_URL_FOR_2");}
.digit[data-n="3"] {background-image: url("IMAGE_URL_FOR_3");}
.digit[data-n="4"] {background-image: url("IMAGE_URL_FOR_4");}
.digit[data-n="5"] {background-image: url("IMAGE_URL_FOR_5");}
.digit[data-n="6"] {background-image: url("IMAGE_URL_FOR_6");}
.digit[data-n="7"] {background-image: url("IMAGE_URL_FOR_7");}
.digit[data-n="8"] {background-image: url("IMAGE_URL_FOR_8");}
.digit[data-n="9"] {background-image: url("IMAGE_URL_FOR_9");}

Default CSS Rules

These are the default CSS properties of elements that are already defined in your widget's iFrame content:

:where(*, *::after, *::before) {box-sizing: border-box;}
:where(#visitorCounter, #visitorCounterDisplay, .digit) {
    display: flex;
    align-items: center;
    justify-content: center;
}
:where(#visitorCounter) {
    padding: 0.5rem 1rem;
    flex-direction: column;
    gap: 0.25rem;
    border: 1px solid #000;
    font-family: Arial, Helvetica, sans-serif;
    height: 100%;
    overflow: clip;
    &::before {
        content: "You are visitor:";
        white-space: nowrap;
    }
}
:where(#visitorCounterDisplay){
    flex-direction: row-reverse;
    border: 1px solid #000;
    padding: 0.25rem;
    gap: 0.25rem;
    margin: 0;
    width: 100%;
}
:where(.digit) {
    flex: 1;
    border: 1px solid #000;
    font-size: 2.5rem;
    background-size: 100% 100%;
    &::before {content: attr(data-n)}
    &:target ~ & {display: none !important;}
}

HTML Structure

The visual part of the HTML inside the iFrame:

<html id="visitorCounter">
    <body id="visitorCounterDisplay">
        <div class="digit" id="digit-1" data-n="#"></div>
        <div class="digit" id="digit-2" data-n="#"></div>
        <div class="digit" id="digit-3" data-n="#"></div>
        <div class="digit" id="digit-4" data-n="#"></div>
        <div class="digit" id="digit-5" data-n="#"></div>
        <div class="digit" id="digit-6" data-n="#"></div>
        <div class="digit" id="digit-7" data-n="#"></div>
        <div class="digit" id="digit-8" data-n="#"></div>
        <div class="digit" id="digit-9" data-n="#"></div>
    </body>
</html>

Update Log

[v5.0] - 22 July 2026, Wednesday

Changed plain text displaying method to digit-based displaying method.

[v4.0] - 18 July 2026, Saturday

Added "css" parameter to iFrame URL to make CSS file hotlinking more flexible.

[v3.0] - 24 June 2026, Wednesday

Replaced script and internal CSS system with a simpler sitename based parameter system and an external CSS loading.

[v2.1] - 21 June 2026, Sunday

Fixed Proxy server errors.

[v2.0] - 2 May 2026, Saturday

Updated widget with an iFrame system to fix CSP errors.

[v1.1] - 3 January 2026, Saturday

Removed thousands separator from visitor display

[v1.0] - 14 November 2025, Friday

Widget is ready to use!

Click To Go Back To The Widgets Page