Module 2: The Sacred Seed Template
In this module, we will replace Blogger's complex default theme with our custom, lightweight, and highly optimized "sacred seed template." This template gives us a completely blank canvas to work with, ensuring there's no interference from Blogger's default styling or structure.
Why a Custom Template?
Blogger’s default templates are designed for traditional blogs, not for custom websites. They are bloated with features you don't need, like comment sections, dynamic sidebars, and unnecessary CSS. Our sacred seed template strips all of this away, leaving only the essential framework for a professional, static website.
The Sacred Blogger Seed Template Code
Below is the complete code for the sacred seed template. **Copy this entire code block** and save it to a plain text file on your computer for future use. This is the foundation of every custom website you will build with this method.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='indie.xml' b:templateVersion='1.3.3' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1' name='viewport'/>
<meta content='text/html;charset=UTF-8' http-equiv='Content-Type'/>
<meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/> <b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> - <data:blog.title/>
<b:else/>ERROR 404 - <data:blog.title/>
</b:if>
</b:if>
</title>
<!-- Paste All required meta tags and content for SEO, analytics, etc. above this comment -->
<b:include data='blog' name='all-head-content'/>
<!-- Paste All external libraries like Tailwind CSS and `script` tag below this comment -->
<b:skin><![CDATA[
/* Custom CSS Styles (Best to paste your custom css styles above this comment */
/* Seed Theme Global Styles.
These styles below are the foundation of your website's look and feel. */
.main-section, .blog-posts {
padding: 0;
box-shadow: none;
}
.blog-posts {
max-width: 960px;
margin: auto;
overflow: hidden;
}
.post-outer {
background: transparent;
border-radius: 8px;
}
.post-title.entry-title {
text-align: center;
color: #007bff;
margin-bottom: 20px;
}
.post-body.entry-content {
text-align: justify:
margin-bottom: 2em;
}
/* These styles below are responsible for
hiding blogger elements not needed for a static site */
.jump-link, .post-footer, .comments, .blog-pager {
display: none;
}
/* Layout Widget CSS Overrides.
These rules below are essential for injecting custom
HTML/CSS via Layout widgets without Blogger's default styling interfering. */
.header-section, .footer-section{ margin: 0 !important;
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important;
min-height: auto !important; /* Prevents Blogger from setting a default height */
}
]]></b:skin>
</head>
<body>
<!-- ====================================================================
* HEADER SECTION * This section is dedicated to the top part of your website.
* You can go to the "Layout" tab in Blogger and add an "HTML/JavaScript"
* gadget here to inject your custom header code.
* ==================================================================== -->
<b:section class='header-section' id='header-section' preferred='yes' showaddelement='yes'>
<b:widget id='HTML1' locked='false' title='' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[
<!-- Copy Paste Your Header Codes Here -->
<]]>
</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<div class='widget-content'><data:content/></div>
</b:includable>
</b:widget>
</b:section>
<!-- ====================================================================
* MAIN CONTENT SECTION * This section will contain your blog posts or pages.
* This is where your single homepage post will display.
* ==================================================================== -->
<main>
<b:section class='main-section' id='main-section' preferred='yes' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='showDateHeader'>false</b:widget-setting>
<b:widget-setting name='style.textcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showShareButtons'>false</b:widget-setting>
<b:widget-setting name='showCommentLink'>false</b:widget-setting>
<b:widget-setting name='style.urlcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showAuthor'>false</b:widget-setting>
<b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>
<b:widget-setting name='timestampLabel'/>
<b:widget-setting name='reactionsLabel'/>
<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
<b:widget-setting name='style.layout'>1x1</b:widget-setting>
<b:widget-setting name='showLabels'>false</b:widget-setting>
<b:widget-setting name='showLocation'>false</b:widget-setting>
<b:widget-setting name='showTimestamp'>false</b:widget-setting>
<b:widget-setting name='postsPerAd'>1</b:widget-setting>
<b:widget-setting name='showBacklinks'>false</b:widget-setting>
<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>
<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<div class='blog-posts hfeed container'>
<b:loop index='i' values='data:posts' var='post'>
<b:include data='post' name='postCommentsAndAd'/>
</b:loop>
</div>
</b:includable>
</b:widget>
</b:section>
</main>
<!-- ====================================================================
* FOOTER SECTION * This section is dedicated to the bottom part of your website.
* You can go to the "Layout" tab in Blogger and add an "HTML/JavaScript"
* gadget here to inject your custom footer code.
* ==================================================================== -->
<b:section class='footer-section' id='footer-section' preferred='yes' showaddelement='yes'>
<b:widget id='HTML2' locked='false' title='' type='HTML' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='content'><![CDATA[
<!-- Copy Paste Your Footer Codes Here -->
]]>
</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:include name='widget-title'/>
<div class='widget-content'>
<data:content/>
</div>
</b:includable>
</b:widget>
</b:section>
</body>
</html>
Step-by-Step Guide to Using the Sacred Seed Template
Now that you have the code, it's time to apply it to your Blogger account. Follow these steps carefully to replace your current theme with our clean, optimized template.
-
Step 1: Back Up Your Current Theme
Always back up your theme before making a major change. This allows you to restore your blog to its previous state if anything goes wrong. In your Blogger dashboard, go to the **Theme** tab. Click the dropdown arrow next to the "Customize" button and select **"Back up"**.
-
Step 2: Access the HTML Editor
Once your backup is complete, click the same dropdown arrow and select **"Edit HTML"**. This will open the code editor where your current theme is displayed.
-
Step 3: Replace the Old Code
Click anywhere inside the code editor and press **Ctrl + A** (or **Cmd + A** on Mac) to select all the code. Press the **Delete** key to remove everything. Then, copy the **entire** "Sacred Blogger Seed Template" code block from above and paste it into the now-empty editor.
-
Step 4: Save the New Theme
Click the **"Save"** icon in the top right corner. You've done it! Your Blogger blog now has a clean, blank canvas, ready for you to build your custom website on top of it. You've officially applied the core of our method.