Visitor Counter Widget

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 own CSS file to customize it!

ID/ClassElement TypeDescription
#visitorCounterdivMain body of visitor counter. Displays visit count.
#visitorCounter::beforepseudo-class"You are visitor:" text.

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 in your own CSS file for second time.)

: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!