Blogger Templates can be very messed up with lots and lots of code. If you are trying to create a Blogger Template from scratch, the first thing you need is a blank HTML page. That’s exactly what we are going to do today.
Blogger Simple Template To Blank Page
Criteria
Blogger won’t allow you to just add the following code as a template :
<html>
<head>
<title>Blank Blog Template</title>
</head>
<body>
</body>
</html>They will print out errors if you try to save the template. There are certain criteria for making a template for Blogger Blog :
- There must be skin (
- A template must have at least one /b: section tag
- Every section should have a unique id.
- Correct Syntax
If the above criteria are met, Blogger won’t produce any errors when saving the template. For creating a blank HTML Template, we will make sure these criteria are met.
Contents Of Blogger Blank Template
As we said before, Blogger Templates should meet the criteria of Blogger. A Blank Blogger Template should contain the following :
- Basic HTML Page Tags (Html, head, body) and their closings
- Only one
- Need At least a
Create Template
Make sure your blog is using a Simple Template. If not, apply Simple Template to your blog.
Go to your Blogger Blog Template and click on the Edit HTML button. Remove the contents of the Template.
We will now add the Basic HTML page to the Template :
<?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>Head
The contents of the </head> tag are the title, skin, and other elements. We should add the normal codes that are seen on Blogger Templates first :
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>Add the title :
<title><data:blog.pageTitle/></title>Add the Skin with basic CSS that can be changed using Blogger’s Template Designer :
<b:skin>
<![CDATA[/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>More styles can be inserted in, but only the body is mentioned here. By adding more style rules into it, you will be easily able to update the colors, background, etc… from the Template Designer.
There are additional CSS files that are loaded by Blogger before. If you want to disable that, see this post.
Body
Blogger needs an element in the template. So, we should add it inside the body.
<b:section id='main' showaddelement='yes'/>This section is the main section of the blog where we can add gadgets to it.
The Full Code
And the whole Template code would be :
<?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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin>
<![CDATA[/*
body {
font: $(body.font);
color: $(body.text.color);
background: $(body.background);
padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
$(body.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='yes'/>
<!-- Please Keep The Credits -->
<center><a href="//subinsb.com/make-a-blank-blogger-template">Blank Template By subinsb.com</a></center>
</body>
</html>New Code adding
- Add additional CSS codes inside
- Add JavaScript codes before or after
- Add HTML codes (widgets, code) inside .
- You can do all the stuff in this template just like you do it on an HTML page.
If you want to display the Posts, add the following code inside
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>Example :
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>Save your template and check out your blog. You will now have a plain blank template.