I always enjoy seeing what is possible on other systems and web sites. I’m not a hacker by any means, nor would I EVER call myself that (unless I had dreams of working for the FBI), but this post should open your eyes to the possibilities of what you might be able to achieve with a Blogger blog. I’d like to introduce you to the smallest blogger template you will ever find.
New to my site? This is an ongoing series about building a Blogger template; where I’ll show you each and every move I make as I develop a Blogger Template from scratch. Subscribe to my feed to follow along and learn more than you ever wanted to know about Blogger Templates. Always use a sandbox when trying new things!
The Smallest Blogger Template
xml version="1.0" encoding="UTF-8" ?>
<html 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>
<title>This is the Gluten Free Meals Sitetitle>
<b:skin>CDATA[]]>b:skin>
head>
<body>
<h1>This is an h1 tagh1>
<h2>and h2h2>
<h3>and h3h3>
<h4>and h4h4>
<p>A paragraphp>
<ol>
<li>Ordered List Item 1li>
<li>Ordered List Item 2li>
<li>Ordered List Item 3li>
<li>Ordered List Item 4li>
<li>Ordered List Item 5li>
ol>
<ul>
<li>UnOrdered List Item 1li>
<li>UnOrdered List Item 2li>
<li>UnOrdered List Item 3li>
<li>UnOrdered List Item 4li>
<li>UnOrdered List Item 5li>
ul>
body>
html>
That’s it! There isn’t much there at all. Don’t you wish all templates were this tiny? Perhaps there would be more people able to work with them, but unfortunately that’s not the case. Over the course of this year you’ll see this template become convoluted with the widgets and wrapper code that I’ll add as I document the development of the Gluten Free Meals blog.
It’s my hope that by starting from such a bare HTML template that I’ll be able to show you, step by step, how to create your own template, and through that, empower you with enough knowledge to modify your own.
Included in this “barest of bones” template are a few header elements, a paragraph, ordered list and unordered list. I included these elements just to give a little example of the default styles.
If you have created a sandbox blog like I showed you in this prior post and are trying to follow along, you can copy the above HTML and paste it into your sandbox template. Every now and then I’ll supply the complete HTML for you to do what you will with.
First thing though, we need to understand what we’re starting with. You might recognize some of the HTML in the above code, and some may be foreign to you. Let’s see if I can clear this up for you.
Examination of the Smallest Blogger Template HTML
Let’s take a look at each line.
Line 1: xml version=”1.0″ encoding=”UTF-8″ ?>
If you’ve played with HTML before, you might have noticed this tag at the very start of most every blog, and many web sites.
The HTML you define is actually an XML declaration, and this tag defines the HTML in your template as version 1 XML using a character encoding of UTF-8. I could go on a define this tag even further, but I won’t. It’s discussed here ad-nauseam.
Blogger will inject this line into the template if you try to remove it. Blogger requires this tag be present.
Line 2: <html 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’>
Ah, our opening HTML tag. And yes, that is a single line of code. It’s wrapped for your readability. You’ll find the closing tag at the very bottom of the template (html>). Everything in between is what you can call your HTML document.
The HTML tag includes a few property/value pairs that define the XML namespaces this HTML document will reference.
What?!?! Yeah, I know. Let’s see if I can break this down for you.
Blogger uses specialized tags within the template markup (like <b:skin>, this is not a standard HTML element). When a user requests a page from your blog, Blogger will look at your template, and replace these tags with data that is stored in some database somewhere. This can be your posts, tags you’ve supplied, comments….data.
If you look at the second namespace declaration, it reads: xmlns:b=’http://www.google.com/2005/gml/b’. This address will define for Blogger how to interpret the <b:skin> tag and what to do with it.
Blogger will also inject these namespace references by default, so there really is no need to worry about this any further, unless you’re planning on making this a career thing.
One thing to note is that the URL’s used in the namespace defintions are not web pages, but instead service addresses. They do stuff instead of displaying stuff.
Line 3: <head>
The <head> HTML element defines an area in an HTML document where additional information about the page can be supplied. Arguably the most important part of the <head> section is the <title> tag, which also contains the only part of the <head> section that displays content on the screen (see the title section below).
As the <head> element only defines an area for more elements to provide meta-data (or extended information) about the page, we’ll move along to the next item.
Line 4: <title>
Ah yes, the title tag. You should make yourself very familiar with this as this one tag has great importance for SEO. I’ll cover SEO aspects later in the series, but here is a well written article on that very subject if you are too eager to wait for it. Just keep in mind that it’s a very important tag.
The title tag encapsulates text that will be displayed in a browser title bar. As you read this, the title tag for this page should read “BlogSpot Blog – The Smallest Blogger Template”.
Later in the series we’ll replace our ‘hard-coded’ text with a Blogger control that will dynamically add the title to page for us.
Line 5: <b:skin>CDATA[]]>b:skin>
This is a blogger specific tag structure and is used to define an area where the CSS that defines a blogs “skin” can be written. A “skin” is a nice term to use when describing the general look of your blog or site.
I’ll also cover this particular tag in more detail later in the series. For now, you should know that this tag is only able to be used if the <html> tag contains a namespace reference to “http ://www.google.com/2005/gml/b”.
This is the only Blogger element that is required to be in a Blogger template. The only reason I included it in this post was because I had to. 
That doesn’t mean you need to include anything in it though.
Line 7: <body>
The <body> tag defines an area where you can write the HTML for your web page or blog template. I’ve filled in the <body> section with some HTML to prove this point since it is the element that defines the area that will be visible when a page is rendered to a browser.
If you are following along, check out the Gluten Free Meals blog and you’ll see how the HTML in the above example looks when rendered in a browser. If you are reading this weeks after the post date, who knows what you’ll see.
So, what’s next?
In my opinion, the next logical step I’ll take is to create the div wire-frame for the blog. This will further involve the <b:skin> blogger element, as well as the use of div tags and some CSS to make it all come together.
But what about the site itself and defining a plan for it? I should probably do a little due diligence and plan what parts of the site are going to be there, and explain why.
It’s easy to be eager to just dive in and begin coding, but that’s not how I operate. We need to define where were driving to before we hop on the road! Stay tuned to find out what’s coming next!
How’s it coming for you so far? Do you have any questions on any of this? Perhaps you know some additional information that would be helpful to others reading along? Please share your comments and questions below.
As always, I appreciate your bookmarking and efforts to socially share this content with your readers and friends.
More Information
The global structure of an HTML document
You might also enjoy these related posts
- BlogSpot Blog – The Skin Tag Explained One feature you’ll find in a BlogSpot blog is the ability to use variables for defining the fonts and colors used on your blog. Using variables within the skin tag...
- The Differences Between HTML and Blogger Template Code Do you understand the difference between HTML and Blogger template code? When you take a look at a Blogger template, are you able to read it? I mean, do you...
- BlogSpot Blog – Using Free CSS Templates To Define The Look Last week I explained a little more about the skin tag, and showed you where all the [css] style declarations are going to be placed. This week I plan on...
- Modifying The Blogger Template – Tag Structure There will come a time when you find yourself staring at your template code on the Layout – Edit HTML page. Perhaps what you see there confuses you, or maybe...
- BlogSpot Blog – How to Build a Blogger Blog Here are a few thoughts I’ve had regarding the remaining year and a what I’ll be writing on. Like last years series on Blogger that I started around April, I...
Getting started with a website is easy. Simply follow these steps to get started:
BJ@Charleston Sou... (1)
cam @ toy coupons (1)
Dave@Wheeled Holdall (1)
hahahaha, welcome!
Ooooh Ooooh I did it, too.
It sure is nice to have a sandbox to dig around in.
Thanks for a nice beginning.
baby steps… just what I need!
Perfecto then! I’m using this as my starting point and from here forward will continue to grow and mold the entire template into this framework. Each step will be documented as best I can.
I hope to hear a number of Ah-ha’s through the year.
That is exactly what I see.
You’re able to see this right? http://gluten-free-meals.blogspot.com/
Looks great, nothing but a static page with very little going on. That’s the idea, to start with the barest template and slowly grow it into what it is meant to be.
I figure it might be easier that way, as opposed to starting with a completely messy template and trying to convey things over that noise.
This is a more clean approach IMO and I should be able to focus peoples attention to the details easier.
http://holteender.blogspot.com/
Wayne – this is what I got after pasting in your code.
Yes, you get one page on Blogger, so you’d have to replace the existing code with this code in it’s entirety.
Wayne – I created a Sandbox, if I copy the above code into it, will I have to delete the existing htlm first? I am guessing that I will. I am sure you have said something about this subject, if you have could you refer me to it. Thanks.