Preview

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

How to add?

By hotlinking:

Put this script on your HTML document.

<script src="https://404city.neocities.org/widget/visitorCounter.js" data-sitename="YOUR_SITENAME_HERE"></script>

By uploading on your site:

Click here to download script! Then, upload it on your site and put this line on your HTML document.

<script src="YOUR_SCRIPT_PATH_HERE" data-sitename="YOUR_SITENAME_HERE"></script>

Make sure the script is located after <body> but before </body>:
Set the "data-sitename" attribute to your sitename. (e.g. => data-sitename="404city")
The visitor counter widget will instantly pop-up where you put the script!

ID and Class Informations:

Here are the ID and Class definitions of visitor counter. You can use them on your CSS file to customize your it!

ID/Class	Element Type	Description
#visitorCounter	div	Main body of visitor counter. Displays visit count.
#visitorCounter::before	pseudo-class	"You are visitor:" text.

Default CSS Definements

:where(#visitorCounter) {
    height: 100px;
    width: 300px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border: 1px solid black;
    font-size: 3rem;
    font-family: Arial, Helvetica, sans-serif;
    user-select: none;
}
:where(#visitorCounter)::before {
    content: "You are visitor:";
    font-size: 1rem;
}

Update Log

14 November 2025, Friday

Widget is ready to use!

Visitor Counter Widget