🛠 The Master Prompt

Role: Senior Frontend Developer & Blogger Theme XML Expert
Task: Create a single-file, production-ready XML theme for Blogger named "Portfolio Pro".
Design Style: Modern, Minimalist, Mobile-First, Glassmorphism.

1. Visual & Layout Requirements

Header: Sticky, glassmorphism effect (backdrop-filter: blur), Dark Mode toggle, Mobile Hamburger menu.

Hero Section: Homepage only. Dot-pattern background. Editable via Layout.

Portfolio Layout:

Homepage: A sequence of full-width sections (About, Services, Featured Work, Skills, Testimonials, Contact) followed by the Blog Grid.

Blog Grid: Masonry-style 2-column grid on desktop, 1-column on mobile.

Single Post: Clean typography, centered header, threaded comments enabled.

2. Technical Requirements (Strict)

Tech Stack: Semantic HTML5, CSS Variables (no frameworks), Vanilla JS (ES6+).

Core Web Vitals:

LCP: First post image on homepage MUST be loading='eager' with fetchpriority='high'.

CLS: All images must have explicit width and height attributes or aspect-ratio CSS.

Accessibility: WCAG AA compliance (high contrast colors, ARIA labels).

3. Blogger XML Constraints (CRITICAL)

Strict XML: All HTML tags must be self-closed (e.g., <input />, <img />).

CDATA: All CSS and JavaScript content must be wrapped in //<![CDATA[ and //]]> to prevent XML parsing errors.

Entities: Do NOT use named entities like &copy;. Use numeric entities like &#169;.

4. Specific Bug Prevention (Do Not Deviate)

Widget Settings: Do NOT include <b:widget-setting name='style.layout'> in the Blog1 widget. This causes an "Unknown Ad Layout" error.

Single Page Rendering: In the Blog1 widget, for the Single Post view (<b:else/> of isMultipleItems), you MUST wrap the content in <b:loop values='data:posts' var='post'>. Do not try to access data:post directly without this loop, or the page will fail to render.

Comments: Do NOT use the <b:include name='comment_picker'/>. It is often undefined in custom themes. Use <b:include data='post' name='threaded_comments'/> instead.

Editable Widgets: All Homepage HTML widgets (Hero, About, etc.) must have locked='false' so the user can edit them in the Layout tab.

🐛 Technical Post-Mortem: Mistakes & Fixes

Here is the log of specific errors encountered during the development of this theme and the mandatory fixes required to solve them.

1. The "Unknown Ad Layout" Error

The Mistake: Including the line <b:widget-setting name='style.layout'>layout:default</b:widget-setting> inside the Blog1 widget.

The Issue: Modern strict Blogger XML validators often reject this specific setting in custom themes, preventing the file from saving.

The Fix: Delete that setting line entirely. The widget works perfectly without it.

2. Single Post Page Not Rendering / Empty

The Mistake: Trying to render the Single Post view using data:post directly inside the else block of isMultipleItems.

<!-- BROKEN CODE -->
<b:else/>
  <b:include data='post' name='postDetail'/> <!-- 'post' is undefined here! -->
</b:if>


The Issue: Blogger does not automatically inject the post object into the global scope of the Main includable, even on single pages.

The Fix: You must loop through data:posts (even if it contains only one post) to define the variable.

<!-- WORKING CODE -->
<b:else/>
  <b:loop values='data:posts' var='post'> <!-- This defines 'post' -->
    <b:include data='post' name='postDetail'/>
  </b:loop>
</b:if>


3. "Failed to Render Gadget" (Comment Picker)

The Mistake: Using <b:include data='post' name='comment_picker'/>.

The Issue: The comment_picker includable relies on specific internal dependencies that are often stripped out of clean/minimalist custom themes, causing the renderer to crash.

The Fix: Remove comment_picker. Use threaded_comments or standard comments include, or omit it if comments aren't a priority.

4. User Customization friction

The Mistake: Setting locked='true' on homepage widgets (Hero, About, etc.).

The Issue: Users could not edit the text or images without editing the HTML code.

The Fix: Set locked='false' on all HTML widgets intended for user content. This enables the "Pencil" icon in the Blogger Layout dashboard.

5. XML Parsing Errors (SAXParseException)

The Mistake: Using & inside JavaScript (e.g., &max-results=5) or < in comparisons.

The Fix: Wrap ALL JavaScript and CSS blocks in CDATA sections:

//<![CDATA[
  if (a < b && c > d) { ... }
//]]>