How to Build a Custom Blogger Theme from Scratch (XML & SEO Guide)

TL;DR: Article at a Glance

Goal: Build a lightweight, SEO-friendly Blogger template.
Complexity: Intermediate (requires basic HTML/XML knowledge).
Key Takeaway: Custom templates allow you to bypass outdated "Simple" themes for better performance.
Tools Needed: Blogger Dashboard, Chrome DevTools, and a text editor.

I Want to Create My Own Blogger Template... Here’s Why.

Woman coder with green glasses developing a custom Blogger theme with XML and HTML code on multiple monitors

Breaking down the barriers of default templates: Building a local-first, SEO-optimized Blogger skin from scratch.

Why would I want to do such a thing in the first place? Well, to start, I realized that the only template Blogger offers that is truly search engine friendly is the "Simple" theme. If you haven't seen it lately, it is quite outdated. Honestly, the "internet of old" was hideous, and that’s one of the main reasons I went to school to learn how to code!

Understanding Blogger Elements and Tags

I started by diving into the specific tags and elements that the Blogger platform uses. It’s impossible to get your posts or pages to actually show up without knowing how to address these unique elements.

The resources at the bottom of this post are a great starting point, but you’ll also want a browser with built-in developer tools (like Chrome). These tools help reveal the specific tags Blogger recognizes in real-time.

Declaring the Document as XML

Since Blogger only allows .xml files to be uploaded, we have to start by declaring the document type properly. This tells the system exactly what kind of code to expect.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

The Blogger Parsing Engine

Next, I have to tell the Blogger parsing engine which code libraries and data to use. Think of this as setting the "rules of engagement" for your website.

The code below defines XML namespaces. This sounds fancy, but it just tells the engine where to pull data from, what expressions to use, and how to handle language direction. This all sits at the root of our page, right before the <head> tag.

<html xmlns="http://www.w3.org/1999/xhtml"
b:version='2' class='v2'
data="http://www.google.com/2005/gml/data"
expr="http://www.google.com/2005/gml/expr"
dir="data:blog.languageDirection"
gcse="https://www.google.com/cse/" 
lang="data:blog.locale">

Optimizing the Head Section & Title Tags

Now we create the <head>. This is crucial for UX; it’s what people see on their browser tabs when they have multiple sites open.

I've included the <b:include> tag, which automatically pulls in standard metadata like descriptions and titles. I also used a <b:if> tag to customize the title behavior: if a reader is on the homepage, it adds a catchy tagline; if they are on a post, it shows the post title first.

<head>
  <b:include data="blog" name="all-head-content"/>
    <title>
      <b:if cond='data:blog.pageType != "item"'>
        <data:blog.pageTitle/> - Guides, Recipes, Life Hacks, and More!
      <b:else/>
        <data:blog.pageName/> - <data:blog.title/>  
      </b:if>
    </title>
  <meta content="!" name="fragment" />
  <meta expr:content="data:post.labelNames" name="keywords" />
</head>

Pro-Tip: While many search engines no longer rely on "keyword" meta tags (thanks to people "stuffing" them in the past), I’ve used a tag to pull post labels as keywords just to keep things organized.

Adding Styles with b:skin

Styles are added using the <b:skin> and CDATA tags. This is where your CSS (Cascading Style Sheets) lives. Ideally, you want your CSS in a separate file to keep your code-to-content ratio healthy for SEO, but since Blogger doesn't allow external file uploads to their directory, we keep them here.

My styles start by ensuring the h1 (the most important heading for SEO) is clean and prominent. I also defined some basic containers for the header layout.

Building the Website Body Structure

Finally, we build the <body>. I’ve used <b:section> tags, which are essentially placeholders that allow you to drag and drop "gadgets" later in the Blogger Layout editor.

<body>  
  <div id="body" class="body">  
    <b:section id="header" class="header" maxwidgets="3" showaddelement="yes"></b:section>  
    <b:section id="navigation" class="navigation" maxwidgets="1" showaddelement="yes"></b:section>  
    <b:section id="main" class="blog-posts" maxwidgets="" growth="vertical" showaddelement="yes"></b:section>
  </div>
</body>

The Complete Minimal Template Code

Once you save this (and provided you’ve closed all your tags correctly), you’ll have the bare minimum requirements for a functional, custom webpage!

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
b:version='2' class='v2'
data="http://www.google.com/2005/gml/data"
expr="http://www.google.com/2005/gml/expr"
dir="data:blog.languageDirection"
gcse="https://www.google.com/cse/" 
lang="data:blog.locale">
<head>
  <b:include data="blog" name="all-head-content"/>
  <title>
    <b:if cond='data:blog.pageType != "item"'>
      <data:blog.pageTitle/> - Guides, Recipes, Life Hacks, and More!
    <b:else/>
      <data:blog.pageName/> - <data:blog.title/>  
    </b:if>
  </title>
  <b:skin><![CDATA[
    h1 { font-family: sans-serif; font-size: 4em; margin-top: 0; }
    #header-left { display: inline-block; width:600px; }
    #header-right { display:inline-block; width: 300px; float:right; clear:both; }
  ]]></b:skin>
</head>
<body>  
  <div id="body" class="body">  
    <b:section id="header" class="header" maxwidgets="3" showaddelement="yes"></b:section>  
    <b:section id="navigation" class="navigation" maxwidgets="1" showaddelement="yes"></b:section>  
    <b:section id="main" class="blog-posts" maxwidgets="" growth="vertical" showaddelement="yes"></b:section>
  </div>
</body>
</html>

Success!

As long as Blogger doesn’t throw any errors when saving, you’ve successfully created a bare-minimum, functional webpage. Now you can head over to the Layout Editor and start adding gadgets to your brand-new sections!

Gamer Techie Chic