Convert HTML to Blogger Template Tutorial [4 Steps]

Make your own developed Blogger/Blogspot theme or template and this tutorial will help you about how to
convert HTML to Blogger template or XML theme and it is easy.

Read: How to
create responsive Blog HTML Template. Another article to
convert Blogger template to HTML. This Tutorial is for:

  1. If you want to install or use HTML template in Blogger.
  2. If you want to install or use your own designed and developed Blogger template.

How to make Blogger template?

You are waiting to convert your HTML template into Blogger XML Template or Theme. Really it is the awesome feeling to install
own converted and designed theme to Blogger. I am familiar with Blogger since 3 years. Actually, blog and blogging were
started to me by Blogger platform. Searching new free Blogger template from here and there and installing new template
was one kind of passion. I would think, how others can design as much beautiful template. After learning HTML, CSS, JavaScript
I was trying to learn
how Blogger XML code work. Initially, I could customize some changes like adding the new widget, changing some code etc. Whatever, one day I have taken a decision
to learn Blogger XML Theme. As a result, I searched on Google for the conversion HTML to Blogger. Seeing the results
I was hopeless but wasn’t so disappointed. There is no above trying. Finally, I have made my own designed and
developed Blogger theme. This site is developed and designed by me and you may know it is
powered by Blogger.

Convert HTML to Blogger XML Theme Tutorial

Whatever, I am so talkative. Actually, I want to help others who want to know and learn how to convert HTML to Blogger XML
easily and really it is so easy to convert than other
Content Management System (CMS) such as
WordPress,
Drupal,
Magento etc.


It will take less than half hour to convert your HTML file into Blogger template.

If you feel bored to convert and want to create your own Blogger template from scratch then marathon article will give
your
full guideline to create professional Blogger template.

So be conscious from the beginning and copy the necessary code from here for future. Before starting the conversion of Blogger
Theme,

you need to know the following basic concept
:

  • Blogger doesn’t support more than one file or any directory. So make a single HTML file where you have to put all
    code. That means, you can’t put CSS, JavaScript code in different folder or file, you have to put all code into
    one file.
  • Blogger supports the only XML to convert. So you have to rename your HTML file (with .html extension)  into XML (with
    .xml extension). But it is not required to know the advance concept about XML. You can start without any knowledge
    about it.
  • Don’t afraid to see them as much complex code in other Blogger template. You will be happy to know that most of the
    codes are generated by Blogger automatically after installing the template.

4 Steps to Convert your HTML Template into Blogger XML Theme

Before starting the conversion, backup your HTML file to others.
  1. Open your code editor (Personally I use Sublime Text 3) and paste your HTML code here and save as themename.xml (rename
    what you want but with .xml extension).
  2. Cut the all code till
    <head> tag to above and paste the following code.

    <?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html><html class='no-js' 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' xmlns:og='http://ogp.me/ns#'> <!--<![endif]-->
    <head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
  3. Find
    </head> tag and add the following code just before it.

    <b:skin><![CDATA[
    /**PUT YOUR ALL CSS HERE**/
    ]]></b:skin>
  4. Body Customization: Probably you have seen the layout dashboard like below.  There are Favicon, Header, Main,
    Sidebar, Footer section. It will be shown if we make it, otherwise, it will not be shown. Favicon is created
    automatically. So we have to create others.But we need to know the

    differences between section and widget in Blogger
    .The section is the scope or area where one or more widget can be placed. To add widget we need not add in code,
    we need to add just section. To know more details about the
    differences between section and widget read this article. And read this to know
    the similarity between section and widget.

    How to Create Section Blogger

    To create a section you need to write the following code.
    <b:section></b:section> But it is not enough to show section in Blogger dashboard layout. You have to define the name, unique class,
    id, how many widgets you want to add to this section. To do this you have to write this with more attribution
    like below.

    <b:section class='section_name' id='section_name' maxwidgets='1' showaddelement='yes'></b:section>

    You have to put section code within specific div. But remove all image, anchor, text, header before pasting.

    Learn more about section.

    Header: It is required to keep a header section in Blogger theme. Blog name/Logo is shown here. So create
    header section within your logo div. Put the following code within your logo div.

    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='' type='Header'></b:widget></b:section>

    Main: Now find the div area where you want to show post, article. Now put the following code within the article
    or main div.

    <b:section class='main' id='main' showaddelement='yes'>
    <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'>
    </b:widget></b:section>

    Learn What is Widget and how to use?

    Sidebar: Put the following code within sidebar div.

    <b:section class='sidebar' id='sidebar' preferred='yes'></b:section>

    Footer: Similarly Main and Sidebar do for Footer. Put the following code within footer div.

    <b:section class='footer' id='footer' preferred='yes'></b:section>

    If you need to add more section, you can add.

Now you are ready to install your first own
developed Blogger Theme. Upload your XML theme and see what changes.

Remember it is not enough to
develop properly. You have to customize the followings next.

We will discuss those in next tutorial. Till you can check this tutorial to customize your recently designed and developed Blogger Theme. Have got this article helpful or not working? Put your
comment below.