The Sjanu Feature

I built Sjanu because I wanted the stability of Google's infrastructure without the "2012 blogspot" aesthetic. It is a modern, single-column, developer-focused XML template that treats Blogger as a headless CMS with a first-class frontend.

The following sections outline the key features of Sjanu.

1. The "Command Center" Header

Most Blogger themes are cluttered. Sjanu's header is designed to be functional and invisible until you need it.

Configurable Navigation: A clean LinkList widget you can manage directly from the Layout tab. Includes subtle hover animations because we’re not savages.
Global Search Overlay: Press the search icon, and a full-screen, focused search modal appears. It searches your content, not Google's index of it.
Polyglot Support: Built-in Google Translate integration. It doesn't look like a widget; it looks native. Toggle languages instantly.
Theme Engine:
- Dark/Light Mode: One-click toggle. Respects system preferences (prefers-color-scheme) out of the box.
- Accent Colors: 16 preset color themes. Sick of "Blogger Orange"? Switch to Teal, Purple, or Slate in seconds.
Reading UX: A subtle reading progress bar tracks your scroll depth, and a "Back to Top" FAB appears when you're deep in the comments.

2. The Homepage

The homepage is designed for scannability and performance.

Hero Carousel: Two Modes

I hate heavy sliders, so I built two versions:

Static (Default) : Pure HTML/CSS. Blazing fast, 0 layout shift (CLS). You edit the HTML widget to change slides. Best for LCP.
Dynamic (Lazy) : Want to just pick posts? Enable the "Hero Config" widget, drop in your post links, and a 2KB JS script will fetch the title, image, and snippet via the API. It’s slower but easier to manage.

The Feed

Card Layout: Posts are displayed in a clean, reverse-chronological card grid.
Popular Posts & Categories: Standard sidebar widgets, but styled to match the modern aesthetic.

3. The Reading Experience (Post Detail)

This is where Sjanu shines. I write technical content, so I need my posts to look like documentation, not a diary.

Smart Color Adaptation: The ContentNormalizer script automatically detects and strips hostile inline styles (like black text copied from Word) when in Dark Mode. No more invisible text.
Auto-TOC: Automatically scans your h2, h3, h4 tags and builds a sticky Table of Contents. Essential for long-form tutorials.
Social Sharing: Minimalist share buttons that don't track you across the web.
Threaded Comments: A fully styled, nested comment section. It actually looks like a modern discussion thread (think Reddit/Hacker News), not a guestbook.
Markdown Support: Native rendering for code blocks, tables, and blockquotes.

Use markdown in post detail

Blogger's real-time markdown rendering is slow, so I created a separate page to write and render markdown. You can copy the rendered HTML to your post:

https://sjanu.ytsang.online/p/markdown-editor.html

Attention:
In Sjanu, if you want to make a html page with full screen, you need to set the Configuration Trigger Code in HTML:
<body>...
<header>...</header>
    ...
    <div id="fullscreen-page-trigger" style="display:none;"></div>
    ...
</body>

4. Technical Specs

I didn't just skin it; I refactored the engine.

SEO & Structured Data

JSON-LD: Replaced the ancient data:blog.metaDescription tags with dynamic application/ld+json schemas (WebSite, BlogPosting, BreadcrumbList). Google understands this site better than it understands most WordPress installs.
Smart Meta Tags: Conditional logic for robots, canonical, and Open Graph tags.

Performance (Core Web Vitals)

LCP Optimization: The Hero image uses fetchpriority="high" and loading="eager". Everything else is lazy-loaded.
Resource Hints: Preconnects to Google Fonts and Unsplash CDN.
Code Splitting: CSS is critical-lined where possible.

Responsive & PWA

Mobile First: The grid collapses gracefully. No horizontal scrolling on iPhones.
App-Like: Supports manifest.json and theme-color meta tags for that installed-app feel on Android/iOS.

5. Other Nice-to-Haves

Cookie Consent: A compliant, non-intrusive cookie banner (GDPR/CCPA friendly) is included via LinkList63.
Custom 404 & Pages: Full-screen layout control for static pages (About, Contact).

How to Use

Upload Sjanu.xml to your Blogger theme.
Go to Layout.
Edit the widgets.
Write.

Theme Colors

Dark Mode

The Sjanu Feature

The Sjanu Feature

1. The "Command Center" Header