Personal Blog/Portfolio Blogger Template Prompt for Gemini 3 Pro
Role: Expert Senior Front-End Developer & Blogger (Blogspot) Theme Specialist. Objective: Create a high-performance, "Gold Master" quality XML Theme for Blogger named "PersonaMinimal 2025".
1. Core Architecture & Tech Stack
Format: Strictly valid Blogger XML Layouts Version 3.
Languages: Semantic HTML5, Modern CSS3 (CSS Variables, Flexbox, Clamp), Vanilla JavaScript (ES6+).
Constraints:
NO External Frameworks: Zero dependency. No Bootstrap, Tailwind, or jQuery.
Iconography: Use raw Inline SVGs only (optimized/minified). No FontAwesome.
Mobile-First: CSS must be written mobile-first, using @media (min-width: ...) for tablet and desktop upgrades.
2. Design System & UI
Visual Style: "Sophisticated Minimalism." Generous whitespace, focus on readability, subtle distinct borders, and soft shadows.
Typography:
Headings: Playfair Display (Serif) – elegant and editorial.
Body: Inter or Lato (Sans-serif) – high readability.
Loading: Use font-display: swap and preloading.
Fluid Typography: Use clamp() for post titles so they look massive on desktop but scale down perfectly on mobile without media queries.
Color Palette (WCAG AAA):
Brand: #0f766e (Teal) or User-definable via variables.
Light Mode: Background #ffffff, Text #374151, Border #e5e7eb.
Dark Mode: Background #111827, Text #f3f4f6, Border #374151.
Dark Mode Logic: Native toggle switch. CRITICAL: The script must run in the <head> (blocking) to check localStorage and apply a class to <html> immediately to prevent FOUC (Flash of Unstyled Content).
3. Layout Specifications
Header: Minimal. Centered Logo. Hamburger menu on Mobile; clean text links on Desktop.
Hero Section (Homepage Only):
Concept: "The Author Bio" Hero. Left side: Large H1 Greeting + Short Bio + "Hire Me/Read More" Buttons. Right side: Circular or Rounded-Square Author Portrait.
Rendering: SSR (Server-Side Rendering) using Blogger widgets. No JS injection.
Main Body (Homepage):
Layout: Single Column "Stream" (max-width: 800px, centered).
Post Cards: Large thumbnail (top), Category Pill, Title, Excerpt, "Read More" text link.
Single Post Layout:
Distraction Free: No sidebar on the article page (narrow reading column: 700px).
Elements: Title > Date/Author > Feature Image (Wide) > Content > Author Box (Bottom) > Subscription Form > Comments.
Drop Cap: CSS ::first-letter styling for the first paragraph of the post.
Footer: Simple 1-Column. Social Icons + Copyright + "Back to Top" button.
4. Features & Widgets
Newsletter Widget: A specific styling hook for the standard "Follow by Email" widget to make it look like a modern input group (Input + Button side-by-side).
Table of Contents: Floating sidebar on Desktop (sticky), inline details/summary element on Mobile. Auto-generated via JS.
Reading Progress Bar: A thin line fixed at the top of the viewport that grows as the user scrolls down the single post.
Code Highlighting: Include a lightweight, vanilla CSS/JS syntax highlighter logic for <pre><code> blocks (since personal blogs often share tech tips).
Share Button: A sticky "Share" button at the bottom right that expands into social icons when clicked.
5. SEO & Performance (The "100/100" Requirements)
LCP Optimization:
The Author Image in the Hero and the First Post Image must have fetchpriority="high".
Use Blogger's resizeImage operator to serve WebP thumbnails (e.g., s600-rw).
CLS Prevention:
Hardcode width and height attributes on the logo and all generic images.
Reserve space for the comment section before it loads.
Structured Data (JSON-LD):
Schema: BlogPosting for articles.
Author Schema: Strict Person schema in the header/footer linking to social profiles (SameAs).
6. Accessibility (A11y)
Semantic HTML: Use <main>, <article>, <header>, <footer>, <nav>, and <aside> correctly.
Focus States: Custom outline styling (do not remove outline, just style it to match brand colors).
Color Contrast: Ensure the "Category Pills" and Buttons meet 4.5:1 contrast ratios.
7. Blogger Backend (Theme Designer)
Grouped Variables:
Group: Identity (Author Name, Bio Text, Author Image URL).
Group: Colors (Brand Color, Backgrounds).
Group: Typography (Font sizing).
Layout Editor: Use <b:template-skin> to make the drag-and-drop Layout tab in the backend user-friendly (e.g., hide the "Head" section from accidental edits).
⛔ CRITICAL: MISTAKES TO AVOID (Do Not Do This)
Do NOT use document.write: Anywhere. Ever.
Do NOT rely on default Blogger CSS: You must include <b:skin><![CDATA[ ... ]]></b:skin> but ensure you reset default browser styles (CSS Reset) inside that block.
Do NOT duplicate H1 tags: The Homepage Logo is H1. On Single Post pages, the Post Title is H1 and the Logo becomes a div or span.
Do NOT use "Image-Only" links: Every social icon link must have an aria-label or hidden screen-reader text.
Do NOT hardcode the Author Bio: It must be editable via a standard Text Widget in the Layout tab, or via Theme Variables, so the user doesn't have to touch HTML to change their bio.
Discussion
Comments
Post a Comment