Loading

WIDGETS

Visitor Counter Widget
Click To Go Back To The Widgets Page

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

How to add?

Step 1:

Put this script on your HTML document. (After <head> and before </head> recommended.)

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

Then, set the "data-sitename" attribute to your own sitename.
(e.g. => data-sitename="404city")

Step 2:

Insert this style code into <head> ... </head>.

<style id="visitorCounterCSS"> #visitorCounterDisplay { /*Main body of visitor counter. Displays visit count.*/ } #visitorCounterDisplay::before { /*"You are visitor:" text.*/ } </style>

After that, you can add CSS properties inside the selectors to customize your counter. These properties will be applied into your widget iFrame content.

Step 3:

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

<iframe src="https://404city.neocities.org/widget/visitorCounter" width="300" height="100" style="border: 1px solid #000; box-sizing: border-box" id="visitorCounter" scrolling="no"></iframe>

The visitor count will be displayed on this iFrame.


Default CSS Definements

Here are the default CSS properties of elements that already defined in your widget file. (You don't have to define them for second time.)

body { margin: 0; overflow: hidden; } body, html {height: 100%;} :where(#visitorCounterDisplay){ display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 3rem; font-family: Arial, Helvetica, sans-serif; user-select: none; } :where(#visitorCounterDisplay)::before { content: "You are visitor:"; font-size: 1rem; }

Update Log

2 May 2026, Saturday

  • Updated widget with an iFrame system to fix CSP errors.

3 January 2026, Saturday

  • Removed thousands separator from visitor display

14 November 2025, Friday

  • Widget is ready to use!

Click To Go Back To The Widgets Page