Hello friends welcome to solutionhost.

Today I am writing this article about how to make blogger template from scratch.

This is a second article of blogger theme development that means this is blogger theme development tutorial 2.

In this article you will see necessary code of blogger theme development.

So read complete article carefully for make blogger theme from scratch.

How to make blogger template


How to start make blogger theme

For creating a blogger theme according to your design, you need to know it's basic information.

So please read basics of blogger theme development by clicking below link

Blogger theme development basics

After getting basics knowledge of blogger theme now you can start your blogger theme development.

Basic layout of blogger theme

Blogger theme structure or layout is similar to html layout or syntax.

But in blogger theme we use XML code so it's structure is little different from html layout.

Below is basic structure or coding layout of blogger template -

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en' 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>
<!--- css , script, meta tags and title etc,---->
</head>
<body>
<!----- contents which shows on blog -->
</body>
</html>

Explanation of above structure

In the code, inside head tag we write css ( styles for design our blog) and script for make our blog page dynamic And we write some important meta tags for seo.

Inside body tag we write codes for our Blog and section.

It means code that written inside body tag will be show on our blog page.

You will understood it when you read more tutorials of blogger theme development.

Necessary code of blogger theme design

You need to write some code which is necessary for creating blogger themes.

Below is code for design blogger theme

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html lang='en' b:layoutsVersion='3' 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>
    <meta charset='UTF-8'/>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'/>
    <title>Document</title>
    <b:skin><![CDATA[
    /* write Your Css Here */
    ]]></b:skin>
<b:template-skin><[CDATA[
<!-- CSS code to style Layout options ---!>
]]></b:template-skin>
</head>
<body>
<!---- Header Area----->
<header>
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
</header>

<!---- Content Wrapper ---->
<div class='content-wrapper'>

<!---- Main area blog posts ---->
<main>
<!--- Necessary - Don't Remove-->
<b:section id='main' class='main' maxwidgets="1" showaddelement="no">
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'>
</b:widget>
 </b:section>
</main>

<!---- Sidebar Area Start ----->
<aside>
<b:section id="sidebar" class="sidebar" showaddelement="yes">
        </b:section>
</aside>

</div>

<!---- Footer Start ---->
<footer>
<b:section id='footer' class='footer' showaddelement="yes">
        <!-- Footer widgets -->
</b:section>
</footer>

</body>
</html>


In above code you can add any section, widget, and div, class, and I'd according to your need.

And if you want to remove sidebar then remove entire aside area.

Is this the only code required?

No this code is simple layout code where I adds all required section for blogger theme which should be in any blogger theme.

When you write these code for blogger theme and save, it will automatically extend.

Means some default code of blogger will come automatically and your lines of code will be 900 something.

Conclusion

In this tutorial you have see necessary code to make Blogger theme from scratch.

So just save this site for getting complete blogger theme development tutorial.


Thanks.

Please visit again.