Free Blog Layout

I made this little blog template for you to use and customize for your webpages! It's pretty versatile, but it's also good "as is" with only minor edits like changing the BG image or a few colors. Here is the super-short version of the steps to get this working on your webpage. If you keep scrolling or use the tags on the left, you can get more details for each step. ENJOY!

Step 1. - On your website host, make 3 files with these names: blog.html, blog.js, and style.css

Step 2. - Paste the corresponding code as-is into each file (go to Step 2 via tags or scroll down to get links to the code, links to code also provided on left column of this page!)

Step 3. - Download three fonts to make your page cuter, then upload them to your web host.

Step 4. - Try adding an entry to your blog!

Step 5. - Customize your blog!

Step 1. - On your website host, make a folder for your blog. You can call it whatever you'd like. In that folder, make 3 files:
blog.html
blog.js
style.css

pic of me creating blog.js file on neocities:

Step 2. - Paste the corresponding code into each file (links to code also provided in left column of this page)
blog.html code here
blog.js code here
style.css code here

Step 3. - Download fonts to make your page cuter. You can start with these three, then later add your own fonts, or just ignore this step and use the browser's default font.
Daydream Font Download
Rainyhearts Font Download
Alagard Font Download
Here is how the fonts and everything should look in your blog folder along with the three other files you just made:


You can try other fonts, but you'll have to just edit this part of the CSS to accommodate:

The "src:url" needs to match the name of the font you uplaoded to your web host.

Step 4. - Try adding an entry to your blog! To do this, just go to edit your blog.html page. Find the section that says ARTICLE (see pic below) and copy and paste it above itself to create more blog entries. Just skim through the code a bit and you'll understand. I left lots of little notes all through the code to help :)

Step 5. - Customize your blog! The CSS can be edited and added to pretty much like any ol' webpage. The html page is the main place you'll be going back to for adding more entries.

If you scroll through the CSS page, anything that is an image (.gif or .png etc), a color, or a size/number value, are easy things to test out and customize! If you're trying to figure out what effects what, just make ONE edit at a time so you can easily revert back if needed, or work on a "test" page, not the live version of your blog.

Good luck and let me know if you run into any issues ^_^