Extract the .ZIP file and upload it to your website file directory. If you're using Neocities that will be your dashboard. You should have the following files in one location:
post1 - post7 html files
The blog widget is now ready for use on your page, select further instructions from below to learn more:
Making new blog posts
Go to your 'posts' folder and make a new .HTML file, OR copy one of the existing example posts. If you're making a new HTML file, copy the code from an example post or the HTML provided in the .js file. At minimum, you should have this line: <div id="sc_bpw_postContainer"></div>
Write whatever HTML you want to show in your post between the two <div> tags. A header with the title, timestamp, and labels will be automatically added.
You can also add code outside of the <div> tags, which won't be hidden or attached to any CSS from the blog.
If you'd like the title of your page (the name that appears in the browser tab) to be the same as your post's title, use: <title>sc_bpw_postTitle</title> in the <head> element.
Copy the name of the HTML file, for example: this page's name is 'install'. Open the scWidget_BlogPages.js file and scroll down until you see the custom settings or the line: // FILL IN ANY VARIABLES BELOW IF YOU WANT TO CHANGE THEM FROM THE DEFAULT.
You'll need to add your new post to the 'sc_bpw_postArray' variable, which you do by adding a new array. Start by copying this code and replacing parts of it as written below: ["NAME", "DATE", "TITLE", "LABELS", "IMAGE(optional)"],
NAME: Replace with the name of your page, for example this page's name is 'install'
DATE: Replace with the date you want to publish the post, written as YYYY-MM-DD-HH-MM, for example: August 26th, 2023 at 8:30pm = 2023-08-26-20-30 (Written in 24hr time)
TITLE: Replace with the title of your post
LABELS: Replace with the labels you want to give to your post. Use _ to replace spaces, and make sure every label has a space between them. For example: you would use "blog_post tag_1" and not "blog post tag 1". Leave it as "" if there are no labels.
IMAGE(optional): Replace with the name and file type of your image, for example: "placeholder.png". This is optional, and you can delete this part if you want to use the placeholder image instead (remember to delete the comma before it).
Add that array to the top of 'sc_bpw_postArray', after the first [, and your post will now show properly and be added to your post lists.
Adding the post list to other pages
You can add the list of posts to any page by copying the <div id="sc_bpw_postList"></div> code and adding it to the HTML. If you plan to do so, make sure the 'sc_bpw_postFolder' variable in the cWidget_BlogPages.js will work for any page, anywhere.
You can do this by changing it to /FILEPATHFROMINDEX/posts. Replace 'FILEPATHFROMINDEX' with your folder directory, i.e. if you have the posts folder inside a folder named 'blog', it would be /blog/posts.
Changing the appearance of your blog posts and blog archive
If you want to do it yourself, the style.css file that comes with the .ZIP file has all of the elements listed out. You can make your own style from there.
If you want to use a premade style, go to the CSS Viewer and choose a theme you like. Once you've chosen, download the theme and either rename it to 'style.css', replacing the file in your folders, OR copy the code inside of it and replace the code inside 'style.css'.
Refresh your page to see the changes. If it's not changing, you may need to refresh your cache.
Customising your blog post settings
There are a lot of settings you can change in the scWidget_BlogPages.js file to customise your blog. Inside that file there are notes on what each setting does, but more will be explained below:
sc_bpw_postFolder: Which folder your posts are inside, this filepath can be local or absolute but starts in the same folder the .js file is in.
sc_bpw_imageFoler: Which folder your post images are inside, this filepath can be local or absolute but starts in the same folder the .js file is in. All images you use in the sc_bpw_postArray need to be in this folder.
sc_bpw_imagePreviewPlaceholder: The name of your placeholder image for posts that don't have preview images. You will need to put this image in the same location as the sc_bpw_imageFoler. If you do not have a placeholder image, you may have an error on your page.
sc_bpw_blogHomepage: The link to your home page or whatever page you want the 'back' button to take users to when they are done reading a post.
sc_bpw_timezone: What your timezone is in comparison to UTC / GMT. For example: If you're in AEST that would be UTC+10. It does not account for daylight saving.
sc_bpw_settingHTML_directoryId: Not recommended for change. This is the ID you give an element to have it replaced with a list of post links.
sc_bpw_settingHTML_postTitle: If you set your page's title to this variable (set to 'sc_bpw_postTitle' by default) then it will be replaced with the post's title instead.
sc_bpw_settingHTML_postContainer: Not recommended for change. This is the ID you give an element to have it replaced with a post's information (header, timestamp, etc).
sc_bpw_settingPostList_chronoOrder: Set to "new", "old", or "noOrder". Each one sorts your post list to either have the newest post on top, the oldest on top, or to keep the order of the sc_bpw_postArray, respectively.
sc_bpw_settingPostList_maxPosts: How many post links are shown on one page. Set to 0 to show the max amount of post links on one page.
sc_bpw_settingPostList_navOldText: The text shown on the 'older posts' button.
sc_bpw_settingPostList_navHomeText: The text shown on the 'home' button.
sc_bpw_settingPostList_navOldText: The text shown on the 'newer posts' button.
sc_bpw_settingPost_showTags: true or false. If set to true: labels are shown on the post's page.
sc_bpw_settingPostList_showTags: true or false. If set to true: labels are shown on the post list / archive page.
sc_bpw_settingPost_navPosition: Set to "head", "top", "bottom", "none". Each one notes where the buttons to see new posts and go back to the homepage will go. "none" hides the buttons.
sc_bpw_settingPost_navNewText: The text shown on the 'newer post' button.
sc_bpw_settingPost_navBackText: The text shown on the 'back' button.
sc_bpw_settingPost_navOldText: The text shown on the 'older post' button.
sc_bpw_settingPostFormat_Date: The timestamp formatting shown on posts. The guide for how to write them is below.
sc_bpw_settingPostListFormat_Date: The timestamp formatting shown on post links. The guide for how to write them is below.
Writing plain text (for example: "posted at a time") will show as-written as the timestamp. To add date numbers, such as the month, use the codes below (for example: "Posted on the DDTH in MML").
MML = Long Month (January), MMS = Short Month (Jan), MM = Number Month (01)
DDTH = Day with th (1st), DDN = Day name (Monday), DDS = Day name short (Mon), DD = Day number (01)
YY = Short year (87), YYYY = Long year (1987)
HH = Hour in 24hr time (0-23), HHS = Hour in 12hr time (1-12)
MIN = Minutes (00)
XM = Am / Pm
sc_bpw_rssLink: The link to your RSS file, leave as "" to remove the RSS button.