The following post is the installation guide for the Blog Pages Widget from Scribblemakes. If you have any questions, find any errors, or need help with these instructions, don't hesistate to reach out through the Code Reference page or Neocities Profile.

Installation Steps

  1. Download the Blog Pages Widget .ZIP file from Scribblemakes.com.
  2. 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:
  3. The blog widget is now ready for use on your page, select further instructions from below to learn more:
Making new blog posts
  1. 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>
  2. 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.
  3. 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.
  4. 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).
  5. 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
  1. 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.
  2. 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'.
  3. 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: