Role

You are an expert Blogger (Blogspot) XML Theme Developer and Front-End Engineer.

Task

Create a modern, high-performance, mobile-first Blogger XML template (.xml) that functions as a Text Transformation Tool (SaaS style) on the homepage and a fully functional Blog on inner pages.

Critical Technical Constraints (Mistakes & Fixes Log)

You must adhere to the following rules to avoid common Blogger XML parser errors and layout bugs encountered in previous development cycles:

1. XML Strictness & Entity Parsing

The Problem: Blogger's XML parser crashes on named HTML entities like ©, •, or  .

The Fix: ONLY use numeric character references.

Use © instead of ©.

Use • instead of •.

Use   instead of  .

Wrap all JavaScript and CSS inside //<![CDATA[ and //]]> to prevent < and & breaking the parser.

2. Theme Designer & Variable Types

The Problem: The <Variable> tag crashes the Theme Designer if invalid types or values are used.

The Fix:

NEVER use type="boolean". Use type="string" with default values "true" or "false" instead.

NEVER put complex values (like 0 4px 6px rgba(...)) inside a type="length" variable. Put those values directly in the CSS :root.

type="length" variables must have units matching the min/max (e.g., min="0px" not min="0").

3. Widget Validation

The Problem: "Unknown ad layout" or "Widget settings invalid" errors.

The Fix: Do not include ad-specific settings (like postsPerAd) inside the <b:widget-settings> of a standard Blog widget. Keep settings minimal.

4. Layout Editor vs. Frontend

The Problem: Interactive tools (textareas, buttons) and trademark badges appearing/cluttering the backend Layout Editor (Drag & Drop interface).

The Fix: Wrap the tool logic in <b:if cond='!data:view.isLayoutMode'>. The tool should ONLY render on the live site.

5. Single vs. Multiple Item Logic

The Problem: Clicking a post title shows the snippet/card view instead of the full article.

The Fix: Inside the Blog1 widget, use specific conditional logic:

<b:if cond='data:view.isMultipleItems'>
   <!-- Render Card/Snippet for Home/Search/Archive -->
<b:else/>
   <!-- Render Full Content (<data:post.body/>) for Single Pages -->
</b:if>


6. Navigation Logic

The Problem: Automated PageList widgets are hard to customize, and glassmorphism CSS breaks on older devices.

The Fix: Use an HTML widget for the Main Menu so the user can edit <ul><li> links manually. Use a robust Flexbox CSS approach for the navbar, ensuring the mobile toggle works via simple class toggling in JS.

7. Performance (LCP & CLS)

The Problem: Slow loading and layout shifts.

The Fix:

LCP: Use <b:if cond='data:i == 0'> to add loading='eager' to the first post image, and loading='lazy' for the rest.

CLS: Enforce aspect ratios on images using CSS or explicit width/height attributes.

Design Requirements

Aesthetic: Clean, "SaaS" look. Solid colors (Slate/White/Blue), no complex blurs. Professional typography (Inter/JetBrains Mono).

Layout Skin: Customize the b:template-skin so the Blogger Layout backend is color-coded (Header=Blue, Nav=Green, Sidebar=Orange) and widgets look like modern cards. Add a trademark badge "Designed by befirsttocopy.com" fixed to the top-right of the Layout editor.

Homepage Feature: Include a JavaScript-based Text Transformation Tool (Uppercase, CamelCase, Slugify, etc.) directly on the homepage.

SEO: Include JSON-LD (WebSite, BlogPosting), Open Graph tags, Twitter Cards, and dynamic Title tags.

Deliverable

Generate the complete, single XML file containing HTML, CSS, JavaScript, and Blogger Data Tags.