RSK World - Blog Template 2026 | Post Cards, Sidebar, Dark Mode, SEO-Friendly | RSK World

Blog Bootstrap 5 Dark Mode SEO Vanilla JS

Blog Template is a modern static blog layout with post cards (image, meta, tags, Read more), sticky sidebar (search, tags cloud, categories, recent posts, newsletter, about), pagination, and dark mode toggle (localStorage). Single post page: reading progress bar, social share (Twitter, Facebook, LinkedIn, WhatsApp), copy link with toast, author bio card, related posts. Includes skip-to-content link, cookie consent bar, multi-column footer, print styles, reduced motion support. Built with HTML5, Bootstrap 5, Font Awesome 6, vanilla JavaScript. Pages: index.html, post.html, about.html, contact.html, category.html, search.html, 404.html. CSS: style.css, components.css, animations.css, ux.css, print.css. By rskworld.in.

If you find this Blog Template project useful, you can support with a small contribution.

Secure Fast Trusted

Pay via UPI QR

Scan or tap an amount to auto-generate

₹

Open UPI app

GPay PhonePe Paytm

Download Blog Template

Blog Template Core

main.js: Dark mode (localStorage key blog-template-theme), back-to-top (visible after 400px scroll), reading progress bar on post page, smooth scroll for anchor links, search form redirect to search.html?q=, skip-to-content focus, copy link with toast, cookie consent (blog-template-cookie-consent). All vanilla JS, no frameworks.

main.js – getStoredTheme(), setStoredTheme(), applyTheme(); theme toggle updates data-theme and icon (moon/sun).
style.css – :root and [data-theme="light|dark"] with --blog-primary, --blog-text, --blog-bg, etc.; full dark mode for header, cards, footer, forms.
Post cards with image, meta (date, author, category), tags, Read more; sticky sidebar with search, tags, categories, recent posts, newsletter, about.
Single post: reading progress bar (#reading-progress), share buttons (Twitter, Facebook, LinkedIn, WhatsApp), copy link button, author bio card, related posts.
Accessibility: skip link, ARIA labels, focus-visible outlines; print.css and prefers-reduced-motion in ux.css.

Project Structure & Files

HTML: index.html (blog listing), post.html (single post), about.html, contact.html, category.html (?cat=/?tag=), search.html (?q=), 404.html. CSS: style.css (base + dark mode), components.css (progress bar, back-to-top, tags, share, author bio, sidebar, breadcrumb), animations.css, ux.css (skip link, cookie bar, toast, footer, forms, reduced motion), print.css. JS: main.js. Other: sitemap.xml, README.txt, LICENSE.

index.html – post cards, pagination, sidebar (search, tags, categories, recent posts, newsletter, about); breadcrumbs, cookie bar, back-to-top.
post.html – full article, share buttons, copy link, author bio, related posts (3 cards); reading progress bar at top.
css/style.css – design tokens and dark theme variables; post-card, pagination, footer, post-content, focus styles.
No build step – open index.html or serve folder; works with any static host. LICENSE (MIT) and README.txt with features list.

Layout & Components

Bootstrap 5 grid: col-lg-8 main + col-lg-4 sidebar. Post cards: .post-card with .card-img-top, meta, .tag-pill, Read more. Sidebar: .sidebar-sticky (position: sticky on lg). Tag pills: .tag-pill (rounded, primary tint). Share: .share-btn (twitter, facebook, linkedin, whatsapp). Author bio: .author-bio with .avatar. Footer: .footer-grid (responsive columns). Cookie bar: #cookie-consent (fixed bottom, show/hide via class).

components.css – reading-progress-wrap, #back-to-top (.visible on scroll), .tag-pill, .share-btn, .author-bio, .newsletter-block, .sidebar-sticky, .breadcrumb-wrap.
ux.css – .skip-to-content, #cookie-consent, #toast, .btn-copy-link, .footer-grid, .form-control focus, .empty-state, prefers-reduced-motion.
animations.css – .animate-on-scroll, back-to-top visibility, theme toggle icon hover, tag/share hover, progress bar transition.
Print: print.css hides nav, sidebar, buttons, cookie bar; shows link URLs; clean body/footer for printing.

Pages & Navigation

Home (index.html): listing with 3 sample posts, pagination. Single post (post.html): full content, share, copy link, author bio, related posts. About, Contact (cards for email, phone, address). Category (category.html): URL params ?cat= or ?tag=; inline script sets title and breadcrumb. Search (search.html): ?q= for query; script fills search box and heading. 404: message and links to Home, Search, Contact. All pages share header, footer, breadcrumbs, theme toggle.

Breadcrumbs on every page – Home only on index; Home → Post title on post; Home → About/Contact/Search/Category on others.
category.html – URLSearchParams for cat/tag; page-title and breadcrumb-label updated; document.title set from param.
search.html – form action search.html method get name q; script reads ?q= and sets #search-query, #sidebar-q, h1 text.
404.html – robots noindex,nofollow; 404 display; buttons to index, search, contact.

SEO & Accessibility

Semantic HTML: main, article, aside, nav. Meta: description, keywords, author, robots (index,follow or noindex on 404). Sitemap: sitemap.xml (edit domain before use). Skip to main content link; focus-visible outlines; aria-label on theme toggle and buttons. Cookie consent and toast with role/aria-live. Reduced motion respected in ux.css.

Semantic structure – h1 visually hidden on index; proper heading hierarchy; alt on images; width/height on card images.
sitemap.xml – urlset with index, post, about, contact, search, category; changefreq and priority per page.
Skip link – .skip-to-content; on focus moves to #main-content with tabindex -1 and focus().
Reduced motion – @media (prefers-reduced-motion: reduce) in ux.css shortens animations and disables card image scale on hover.

What You Get

Static HTML/CSS/JS: index.html, post.html, about.html, contact.html, category.html, search.html, 404.html; css/style.css, components.css, animations.css, ux.css, print.css; js/main.js. sitemap.xml, README.txt, LICENSE, LICENSE-THIRD-PARTY.txt. No build step. Open index.html or serve folder. Technologies: HTML5, Bootstrap 5, Font Awesome 6, Vanilla JS. © 2026 RSK World.

Complete source – all HTML, CSS and JS for blog listing, single post, about, contact, category, search, 404; ready to copy or embed.
No build step – open index.html or serve with any static server; no npm or bundler required.
README.txt – features list, file list, technologies, author. LICENSE (MIT) for template use and distribution.
Technologies: HTML5, Bootstrap 5, CSS3, Vanilla JS, Font Awesome 6 – works in all modern browsers. © 2026 RSK World.

Usage

Open index.html for blog home. Use theme toggle in nav for dark mode (saved in localStorage). Click post cards to open post.html. Use sidebar search (submits to search.html?q=). Click tags for category.html?tag= or ?cat=. Newsletter form is front-end only (action #). Copy link on post page copies URL and shows toast. Accept cookie bar to hide it (stored in localStorage).

index.html – browse posts, use search, tags, categories, recent posts; pagination (static links); newsletter signup in sidebar.
post.html – read article; use share buttons or copy link; scroll to see reading progress; author bio and related posts below.
Replace placeholder content – edit HTML for your posts; replace picsum.photos URLs; update sitemap.xml domain; wire newsletter if needed.
Author: RSK World | rskworld.in – free UI/UX projects and source code; contact for customization or integration help.

Project Features

Post cards with image, meta, tags; sticky sidebar (search, tags, categories, recent posts, newsletter, about); pagination; dark mode (localStorage); reading progress bar; back-to-top; breadcrumbs; social share (Twitter, Facebook, LinkedIn, WhatsApp); copy link + toast; author bio; related posts; skip-to-content; cookie consent; multi-column footer; print styles; reduced motion; Bootstrap 5 responsive. All vanilla JS.

Full blog UI – listing, single post, about, contact, category archive, search results, 404; consistent header/footer and sidebar.
Dark mode with CSS variables and data-theme; back-to-top and reading progress; share and copy link; author bio and related posts.
Accessible: skip link, ARIA, focus styles, prefers-reduced-motion; semantic HTML and sitemap for SEO.
Vanilla JS, Bootstrap 5, no frameworks – minimal dependencies; works on desktop and mobile; easy to integrate.

Credits & Acknowledgments

Blog Template by RSK World. Modern blog layout with post cards, sidebar, dark mode, reading progress, social share, and SEO-friendly structure for static blogs and portfolios.

Blog Template – post cards, sidebar, dark mode, reading progress, share, author bio, related posts, cookie consent. Free for learning and integration.
RSK World – Project creator and educational platform for UI/UX demos and free source code.
Author: Molla Samser (Founder - RSK World). Website: https://rskworld.in. Email: help@rskworld.in | Phone: +91 93305 39277. Address: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India.
Third-party credits: Font Awesome – Icons; Bootstrap – CSS/JS framework; Prism.js – Syntax highlighting in file browser.
Razorpay – Payment integration; QR Server API – UPI QR code generation (api.qrserver.com / goqr.me).
© 2026 RSK World. All rights reserved. Blog Template is provided under MIT License for educational and commercial use.

Support & Contact

For Blog Template customization or integration help, please contact us.

Email: help@rskworld.in – for Blog Template customization, layout changes, or front-end questions.
Phone: +91 93305 39277 – support, custom blog requirements, or bulk licensing.
Website: RSKWORLD.in – more free UI/UX projects and resources by RSK World.
Location: Nutanhat, Mongolkote, Purba Burdwan, West Bengal, India – RSK World base.
Author: Molla Samser (Founder, RSK World) – creator of Blog Template and other UI/UX projects.
Blog Template – README.txt with features, file list, and technologies.
Technical Support – help with layout, dark mode, sidebar, or SEO.
Feature Requests Welcome – suggest new components or page layouts.