← Back to all products
$19
Blog Template
Modern blog template with dark mode, categories, search, and responsive layout.
JavaScriptJSONMarkdown
📄 Product Preview
Try the interactive reader and demo tools below, or get the full product with all content unlocked.
📖 Interactive Reader (Free Preview) ⚙ Try Demo Tools 📦 Download Free Sample📁 File Structure 8 files
blog-template/
├── LICENSE
├── README.md
├── assets/
│ └── README.md
├── index.html
├── post.html
├── script.js
└── style.css
📖 Documentation Preview README excerpt
Blog Template
A modern blog template with dark mode, article grid layout, topic filtering, and newsletter signup. Built for writers, developers, and content creators.
Price
$19 -- one-time purchase, lifetime updates.
Features
- Fully responsive -- Mobile-first design with tablet and desktop breakpoints
- Dark/Light mode -- Built-in theme toggle, persists to localStorage
- No dependencies -- Pure HTML, CSS, and vanilla JavaScript
- Under 400KB -- Lightweight and fast-loading
- Scroll animations -- Reveal-on-scroll using Intersection Observer
- SEO ready -- Semantic HTML5, meta tags, Open Graph tags
- Accessible -- ARIA labels, keyboard navigation, proper contrast ratios
- CSS custom properties -- Easy color, font, and spacing customization
Sections
- Hero with blog title and description
- Featured article spotlight
- Article grid with thumbnails, dates, and excerpts
- Topic / category filter buttons
- Newsletter signup form
- Author bio section
- Footer with social links and archives
What's Included
blog-template/
├── index.html # Home page — hero, featured post, post grid, sidebar
├── post.html # Article page — full prose layout, author bio, nav
├── style.css # All styles with CSS custom properties & dark mode
├── script.js # Theme toggle, scroll reveal, mobile nav, search, filter
├── assets/
│ └── README.md # Guide for adding your own images
├── manifest.json # Product file manifest
├── README.md # This file
└── LICENSE # MIT License
Installation
1. Download and unzip the template
2. Open index.html in your browser
3. Edit the HTML content with your blog posts and info
4. Deploy to any static hosting provider
# Open locally
open index.html
# Or use a local server
python -m http.server 8000
Customization
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
script.js
/* ==========================================================================
INKWELL — Blog Template JavaScript
Theme toggle, scroll reveal, mobile nav, smooth scroll,
category filter, and search functionality.
========================================================================== */
(function () {
'use strict';
/* -----------------------------------------------------------------------
1. THEME TOGGLE
Persists to localStorage; respects prefers-color-scheme as default.
----------------------------------------------------------------------- */
const themeToggle = document.getElementById('theme-toggle');
const root = document.documentElement;
function getPreferredTheme() {
const stored = localStorage.getItem('theme');
if (stored) return stored;
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
function applyTheme(theme) {
root.setAttribute('data-theme', theme);
if (themeToggle) {
const isDark = theme === 'dark';
themeToggle.setAttribute('aria-pressed', String(isDark));
themeToggle.setAttribute('aria-label',
isDark ? 'Switch to light theme' : 'Switch to dark theme'
);
}
}
// Apply saved/preferred theme immediately to prevent flash
applyTheme(getPreferredTheme());
if (themeToggle) {
themeToggle.addEventListener('click', function () {
const current = root.getAttribute('data-theme');
const next = current === 'dark' ? 'light' : 'dark';
localStorage.setItem('theme', next);
applyTheme(next);
});
}
// Listen for OS theme changes (only when no manual override)
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
if (!localStorage.getItem('theme')) {
applyTheme(e.matches ? 'dark' : 'light');
}
# ... 216 more lines ...