How To Make Blogger Blog Template From Scratch

Many Bloggers prefers Blogger over WordPress.But still, the truth is most of the blogs are based on WordPress.This is the reason there has been a lot of development in WordPress Themes,Plugins tools etc.

But today, we are going to see how to make the theme of the Blogger blog from scratch. If you also want to make your own theme, for personal or commercial use, you may require -

Knowledge of HTML or XML
Little CSS
And JavaScript(if you want to add the further functionality to the theme and its elements)
So let's start.

Creating A Blank Theme Template

We start first by creating a blank template.Later on we will go on adding elements.

You can start by making a XML file on your computer (local storage) OR directly start by typing in the Blogger's HTML editor.I will suggest to directly write in Blogger's HTML editor as you can execute the script there and other hand, check for the errors also.

Before writing, Backup your original theme and content.For that, follow these steps:-

Go to Blogger.com.
Then select Theme >> Backup/Restore.
Click on Download theme to download the theme.

Theme will be downloaded in .xml file, which you can able to restore if any conjunction occurs in the theme you are currently creating.

Now to write the first theme, Go in Theme >> Click on Edit HTML.

You will see there a code already present of the existing theme.Select it and hit delete.Now click on Save theme button.

You'll get the following error-

Error parsing XML, line 1, column 1: Premature end of file.

Its because the Blogger theme should be a XML file with all the minimal required contents for the theme to successful render.Lets add these minimal components one by one to make our first blank theme.

First thing you need is common xml, html, body and head tags.So lets make them like below-

<?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>
 </head>
 <body>
 </body>
</html>

Now when we try to save this script, Blogger gives following error.
There should be one and only one skin in the theme, and we found: 0

That means there should be only one skin in the theme.This is our second main component of the theme.Lets make it.

<b:skin>
  </b:skin>

We will put this inside the <head>.
Skin tag should contain all the CSS of the document.You can also put that anywhere in the document, but this tags are important.There can be only and only one <b:skin> in the document.

Now lets save this.But wait, Blogger gives us another error.
We did not find any section in your theme. A theme must have at least one b:section tag.

Here comes our third important component of the blogger template- <b:section> tag.Add the following tag in <body>.

<b:section id='section1'></b:section>

<b:section id='section1'></b:section>

There should be at-least one section tag our template and each section should have unique id.

Click to save the theme.Now you can view your blog to see the very blank page of our blogger template.

Many of you may wonder about using of <b: in the tags like section and skin.Let me tell you, they are namespaces used across the blogger.Blogger later changes them to <div> element.

Making Blogger Theme Sections

We already made a section above with a unique id.There can be many sections on each page such as post body, header, sidebar, footer and so on.We can letter assign them or stylise them by writing CSS in <b:skin>.

Sections contains widgets.We'll see how to make them later.Let's first make the sections.

You can choose most common design for the theme having 4 sections - header, blog post, sidebar and footer.I would like to make the theme somewhat like below.

So lets make 2 sections with their unique ids.Header and footer will be in <header> and <footer> tags and ads will be in <div>.

Search This Blog

Blogger Codes