How To Make Blogger Blog Template From Scratch - Step by Step Tutorial

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>

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>.

<body>

   <b:section id='body'></b:section>
<b:section id='sidebar'></b:section>

</body>

After successfully saving this blogger template, go to layout.

You'll see 2 sections are already been made there.Now you can easily add the widgets from there.But wait! We need to position the sections according to our scratch using CSS and for that, we will assign classes to our sections.After assigning classes, the code will look like below.[There is no actual need of assigning classes to sections as we can select elements in CSS using their ids also.]

<body>

   <b:section id='body' class='body'></b:section>
   <b:section id='sidebar' class='sidebar'></b:section>
 </body>

Okay so now we can position these elements using CSS. Note that <b:section> changes to <div> with their specified IDs after rendering so you can select them in CSS like following.

div#body{}
div#sidebar{}

But we have set classes to these elements so it is much easier to select them with classes.

Assigning Positions For Sections

For assigning positions for sections in our Blogger template, we will make use of some basic CSS properties like height, width, left, right, margin, padding etc.

<![CDATA[

.sidebar{
     height: 100%;
     width: 250px;
     position: fixed!important;
     z-index: 1;
     overflow: auto;
     background-color:#b5b5b5;
     animation:animateleft 0.4s;
}
 .body{
     margin-left:250px;
     padding: 20px;
}

]]>

So after adding the above CSS, the theme looks like this-

The property of sidebar is set to be fixed.So that the sidebar will be fixed no matter how you scrolled down. I've added little dummy text 'Lorem Ipsum' to scroll and see whether the tings work fine or not.

You must have noticed that <![CDATA[ and ]]> comes before and after the CSS code in <b:skin>.

What does <![CDATA[ ]]> means?

Lets take the definition directly from StackOverflow.

CDATA stands for Character Data and it means that the data in between these strings includes data that could be interpreted as XML markup, but should not be.

That means CSS will not be interpreted as XML.Note that CDATA should also be used to wrap JavaScript, or Blogger might give you an error.

Attributes Of Sections

One thing remained was attributes.Below is the table of possible attributes and their values that you can use in <b:section> tag.

Attribute	Required/Optional	Value	Default value
id	Required	A unique Id made up of letters and numbers.	(Null)
class	Optional	A class name with letters and numbers.	(Null)
maxwidgets	Optional	Maximum number of widgets that can be placed in the session. Value can be any number.	(If you don’t specify a limit, you can add unlimited widgets.)
showaddelement	Optional	Determines whether the Page Elements tab will show the 'Add a Page Element' link in the section. The possible values are ‘yes’ or ‘no’.	Yes
growth	Optional	Determines the arrangement of the widgets .Possible values are ‘horizontal’ or ‘vertical’.	vertical

So if you want to change any of the settings above you can change it with attributes.Below is the sidebar session after adding some attributes.

<b:section class='sidebar' id='sidebar' growth='vertical' maxwidgets='10'/>

Adding Widget to Blogger Template

Now next step comes to be adding of widgets to our Blogger Template. For that, go to layout > select a section and click on add gadgets.
You can also add widgets through markup.Widgets should be inside <b:section> and they should have unique id just like sections. Furthermore, a widget type is required or else Blogger will throw an error-
The new widget with id "abc" has no type. A widget type is required when adding a new widget.

Let's see the attributes in widgets.The below data is available on Google Blogger Help page.

Attribute	Required/Optional	Value	Default value
id	Required	A unique Id made up of letters and numbers.	(Null)
type	Required	Indicates the kind(type) of widget.	(Null)
locked	Optional	You can rearrange the widgets in layout when set to be ‘yes’. When widget is locked, we can’t move or delete it. Possible values are ‘yes’ or ‘no’. You may have noticed movable icon on the left of the widget in layout.	no
title	Optional	Title to be displayed.	(If no display title is specified, a default title such as “List1” will be used.)
pageType	Optional	Possible values are ‘all’, ‘archive’,’main’,’item’. The widget will display only on the designated pages of your blog. (All widgets display on the Page Elements tab, regardless of their pageType.)	all
mobile	Optional	Possible values are ‘yes’,’no’,’only’ ao ‘default’.Only Header, Blog, Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is 'default.'	default

The different types will be automatically added after you choose the widget in the layout > Add Gadget.However, I've given the list of common types(case-sensitive) below, which you can use making widgets.

Logo
NewsBar
Feed
SingleImage
BlogArchive
Blog
BlogProfile
Header
HTML
LinkList
List
Navbar
VideoBar

Now coming back to the theme we were making, go to layout in menu.It will look something like below.

Then click on add a gadget to add a widget.

First we will add name of the blog at the top of the sidebar.So we choose HTML/JavaScript.

After adding HTML, click save.Its better to add the title or logo in <header>.

Now, when we reload, we see the following result.

Boom! Now if you want all h1-h6 tags in your own font, <input>, <p> in your own design, you can specify their CSS in <b:skin>.

Now next, we will add the Link list in same manner.After that, the main thing is blog post.To show the blog posts, we will use the following widget.

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Then go in post and write a new post and publish.When you'll reload your blog, you'll see it there.

This was our theme.But wait! There is lot more to do.If you go back and look at the whole code,you'll see their auto generated markup under <b:widget>.They are includable and include.If you ever had a look at the professional themes, there are many other items.We will know about them in the next post.

If you haven't liked CSS magz's Facebook page yet, do like it.It will give you notification once the post is ready.So that's it how you can make a very simple looking theme in Blogger you can make it a little professional like with additional css.