How to create custom blogger template : Part 1

Hello friens, how are you ?

I hope you are pretty good.

It this post we will discuss on how to create blogger trom scratch. Its first part of Blogger Template Creation Series.

Creating a own blogger theme is not tough as you think. A little knowlede of html, css and javascript is required for designing custom blogger template. I have already posted a list of best blogger template for tech niche blog. You can choose any template , but having  a custom and unique  template is nobel thing for a blogger.

There are few tools present to design blogeer template. Here is list of required tools and steps to make our works easy.create your own Blogger Template

If you are going to follow my post to create your own blogger template then you should have following things.

  1. A Demo Blog: Its very nessary to have a demo blog. Because we will do a lot of experiment with codes. So it will not affect your blog traffic, seo and other inportant things. If you a demo blog then go ahead. If you don’t have then create one and post 4 to 8 blog post with images proper fromatting. You can copy paste these contents.
  2. FireBug: This is addon for mozila firefox. It will help you to make your work easy. You can get this addon from here.
  3. Inspection Tool: Iif you are not using firebug then this tool wiill be handy. In firefox you can get this feature by ctrl+shift+c.
  4. Text Editor: For better code expeience we need a good text editor. Notepad and Notepad ++ is good text editor
  5. A scratch of Design: Before starting, create a rough scratch in photoshop. You don’t need to put more effort in this.

How to create blogger template

After collecting above tools, next step os to move on blogger and start work.

  1. First of all, login to your blogger dashboard.
  2. Now create a demo blog. If you have already demo blog then skip this.
  3. Now open that demo blog dashboard.
  4. Navigate Template >> Edit HTML.

blogger templateNext, you will see blogger template editior.

blgger text editor

Above all steps are easy and you may know already. Main part of creating blogger template is start from here.

Step#1

You are in blogger template editior. Select all codes and delete them. And click save. Is you saved.

It will show error like “Error parsing XML, line 1, column 1: Premature end of file”

blogger template error

Blogger support xml language. so first declare xml

Copy these codes and paste to text editior.

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ 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>

</html>

Step#2

Now try to save. You will see anothet error like “There should be one and only one skin in the template, and we found:”

Step# 3 

Now add skin tag in editor. Copy paste below below <head>

<b:skin><![CDATA[/*

]]></b:skin>

In skin tag our template css will written. I will explain this in next part. Now save template. You still seeing an error saying “The template must include a “<body>” tag

Step# 4

Here we need to add body tag to blog template. Just add below codes after </head>

<body>

</body>

Now try to save template. A new error like We did not find any section in your template. A template must have at least one b:section tag.

Step#5

Here we need to add b:section tag. Copy below codes and paste after <body>

<b:section class=’header-right’ id=’header-right’ maxwidgets=’1′ showaddelement=’yes’>
</b:section>

Now save template. Saved ?

Yes you have created a white page template. In simple, complete template is here.

<?xml version=”1.0″ encoding=”UTF-8″ ?>
<!DOCTYPE html>
<html b:version=’2′ class=’v2′ expr:dir=’data:blog.languageDirection’ 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>
<b:skin><![CDATA[/*

]]></b:skin>

</head>

<body>

<b:section class=’header-right’ id=’header-right’ maxwidgets=’1′ showaddelement=’yes’>
</b:section>

</body>

</html>

Over to you: This post is written for understanding basic of blogger template.In next postseries i will share how to add header, siderbar and footer to blogger template. Drop your valuble comment.

13 Comments

  1. Ravijit Chavda August 4, 2016
  2. Vikram Kumar Raj August 4, 2016
    • Prabhat Jani August 5, 2016
  3. manoj August 5, 2016
  4. Shibam Kar August 5, 2016
  5. Emediong Joseph December 8, 2016
  6. Vipin Mishra August 19, 2017
  7. Sajid Hussain August 26, 2017
  8. Toluwase October 12, 2017
  9. R Patidar October 25, 2017
  10. wadagizig April 22, 2018

Leave a Reply