Step 0: Extract Files
After downloading the guestbook-widget zip file, extract it to get the guestbook-widget folder with all the necessary files inside.
Folder Structure
You need to upload the guestbook-widget folder to your Neocities File Manager. Here's what the structure should look like:
Installation Steps
Step 1: Add CSS Link
In the head section of your HTML page where you want the guestbook to appear, add this line of code:
Step 2: Add Guestbook HTML
Open the guestbook-widget.html file and copy the entire guestbook widget code. Paste this code where you want the guestbook to appear on your page.
IMPORTANT: Change the iframe URL in the code to point to your actual guestbook page.
Step 3: Add JavaScript
Before the closing body tag on your page, add this line of code:
Important Notes
- Do NOT change the folder name "guestbook-widget" or any file names inside it
- Update the iframe URL to point to your actual guestbook page
- You can delete guestbook-widget.html after copying the code - it's just an example file
- The character animation will work automatically once all files are uploaded
Customization Options
Change Size
You can modify the iframe height in the HTML code. The recommended range is 300px to 500px.
Change Colors
Edit the guestbook-style.css file to change colors. You can modify the guestbook-box background and box-header background colors.
Use Custom Sprites
You can replace the image files in the guestbook-widget/Assets folder with your own sprites, but you must keep the exact same file names.
If you're confused about making a sprite, just check the Assets folder. The images in there are good references.
File Purpose
- guestbook-style.css contains the styles for the widget appearance
- guestbook-script.js handles the character animation logic
- Assets folder contains all the character sprite images
- guestbook-widget.html is an example file that can be deleted after use
Troubleshooting
- If the character doesn't appear, check that all sprite files are uploaded
- If the guestbook doesn't load, verify the iframe URL is correct
- Make sure the CSS and JS file paths are correct in your HTML
- If it doesn't work after checking everything, contact me for help
The widget is now ready to use! The animated character will climb and walk around your guestbook area, making it more fun for your visitors.