Al Hasanain International

How to create Blogger Template from Scratch

Before starting Blogger Theme Development

Check yourself. Are you skilled in the followings? If you don’t have any skill then you have to be skilled in HTML & CSS (At least). You can learn Web design with HTML & CSS courses from w3schools . It offers another popular courses free. One of them Bootstrap, JavaScript, jQuery.

HTML (Required)
CSS (Required)
JavaScript (Optional)
XML (Optional)
Responsive Framework (Optional)

Read: How to create your first Responsive Blog HTML Template

The components you need:
1. HTML/CSS Editor. Off-line is recommended. Notepad++, Sublime Text, Dreamweaver, Geany etc. On which you prefer to code.
2. Notebook to save the essential codes, tips etc.

Probably, you had tried to upload your designed HTML template on Blogger manually or copy-paste. But every time you failed to see the changes because many errors are shown on notification bar in Blogger HTML Editor.

Today you won’t be failed to see your designed HTML template through Blogger platform. Not only the outlooking changes of your Template, but also you will make your HTML template dynamic such as Header, Post Title, Post Body, Sidebar, Footer will show generated data. You can custom logo, Blog Title, Sidebar etc through Blogger Dashboard without customizing any HTML code.

Hello World in Blogger

1. From Blogger Dashboard → Theme → Edit HTML and clean up all codes. Select all by Ctrl + A and DELETE or Backspace.

2. Now paste the raw HTML of basic page on the blank space. Then save the theme. Assume, our selected codes are as below:

<html>
  <head>
     <title>Title of Blog</title>
  </head>
  <body>
     <p>Hello World</p>
  </body>
</html>

If you try to save the theme, you will see a notification as “There should be one and only one skin in the theme, and we found: 0". It shows because we have to put just one skin within <head></head> tag. And that is -

<b:skin>
  <![CDATA[
     /****CSS CODE*****/
     ]]>
</b:skin>

Please put this code after </title> tag and now save your theme.

Ops ! Again notification ! And this notification is:
“We did not find any section in your theme. A theme must have at least one b:section tag."
Blogger Editor shows this because we didn’t add any section in body tag. So just copy-paste the followings code in body tag. You can paste just before <p>Hello World</p>

<b:section id="hello" class="hello"></b:section>