Description
.tpl-section{background:#0f0f0f;border:1px solid #c9a84c;border-radius:10px;padding:28px 32px;margin:28px 0;font-family:’Segoe UI’,system-ui,sans-serif;color:#e8e8e8}
.tpl-section h3{color:#c9a84c;font-size:1.05rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin:0 0 18px;padding-bottom:10px;border-bottom:1px solid #2a2a2a}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.tpl-grid li{background:#181818;border:1px solid #2a2a2a;border-radius:7px;padding:14px 16px;font-size:.9rem;line-height:1.5}
.tpl-grid li strong{display:block;color:#c9a84c;margin-bottom:4px;font-size:.82rem;text-transform:uppercase;letter-spacing:.06em}
.tpl-included{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.tpl-included li{display:flex;align-items:flex-start;gap:9px;background:#181818;border-radius:7px;padding:10px 13px;font-size:.88rem;line-height:1.45}
.tpl-included li::before{content:”✓”;color:#c9a84c;font-weight:700;flex-shrink:0;margin-top:1px}
.tpl-stack{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-stack li{background:#1a1a1a;border:1px solid #c9a84c33;border-radius:20px;padding:5px 14px;font-size:.8rem;color:#d4b96a;font-weight:600}
.tpl-for{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tpl-for li{background:#1a1a1a;border:1px solid #3a3a3a;border-radius:6px;padding:7px 14px;font-size:.85rem;color:#ccc}
.tpl-for li::before{content:”→ “;color:#c9a84c}
Blog Template HTML Template — Everything a Content Creator Needs
Launch a professional editorial blog in minutes with this fully coded HTML/CSS/JS template. Designed for writers, journalists, and niche publishers who want a fast, SEO-friendly blog without the WordPress overhead.
Feature Highlights
- Hero Featured PostFull-width editorial hero with cover image, category badge, headline, author, read-time, and CTA link.
- Category Filter TabsAll / Tech / Design / Business / Lifestyle — JS filter with smooth fade-in/out transitions.
- Article Card GridResponsive 3-column grid — thumbnail, category tag, title, excerpt, author avatar, date.
- Sticky SidebarPopular posts widget, search bar, category list with post counts, and tag cloud.
- Single Post ViewAuto-generated TOC from headings, scroll progress bar, reading time, syntax-highlighted code blocks.
- Social ShareOne-click sharing: Twitter/X, LinkedIn, Facebook, and copy-link button with toast confirmation.
- Author Bio BlockAvatar, name, short bio, and social links appended after each article.
- Related Posts3-card related content section below each article to reduce bounce rate.
What’s Included
- index.html — blog home / listing page
- post.html — single article template
- style.css — editorial stylesheet with CSS variables
- blog.js — filter tabs, TOC, reading time, share logic
- /assets/ — demo cover images, author avatars, category icons
- README.md — how to add posts, configure categories
Tech Stack
- Pure HTML5 + CSS3
- Vanilla JS
- Google Fonts — Inter + Merriweather
- Intersection Observer
- CSS Grid (responsive)
- Zero dependencies
Perfect For
- Content creators wanting a custom blog without WordPress
- Niche publishers optimizing for Core Web Vitals
- Developers building a static blog with Eleventy or Hugo
- Agencies delivering client editorial sites fast
- Journalists launching a personal publication
Frequently Asked Questions
Does it include a CMS?
＋
No — it’s a front-end template. You can pair it with any headless CMS (Contentful, Sanity, Ghost) and fetch your posts via their API, or use a static-site generator like Eleventy or Hugo.
Can I integrate it with WordPress?
＋
Yes. Convert each template section to a WordPress theme file (index.php, single.php, etc.) and use the WordPress Template Hierarchy to drive content dynamically.
Is pagination included?
＋
The post-listing page includes styled previous/next pagination controls. Wire them to your CMS’s pagination API or generate numbered pages at build time with a static generator.
Can I add a newsletter sign-up?
＋
Yes. A sign-up form section is included in the template. Connect it to Mailchimp, ConvertKit, or your ESP of choice via their form embed or API.
Is the reading-time estimate real?
＋
The reading-time badge is calculated client-side via a small inline script that counts words in the article body. No configuration needed — it works automatically on every post.
Lucas M. –
The waitlist form with email capture and confirmation state is built right in — saved me a ton of time. Clean, modern aesthetic that scales from MVP to full product without looking dated. Excellent template.
Ella T. –
Great content flow: hook → pain points → solution → social proof → CTA. The animated counter stats section added energy to an otherwise text-heavy page. Minor gripe: the mobile hamburger menu needed a close-on-click fix.
Harper L. –
Perfect for validating an idea fast. The problem/solution section is laid out logically and the social proof strip (logo bar) gave our landing page instant credibility. We converted 18% of visitors to waitlist sign-ups.