Blank Template / HTML Page In Blogger.
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.
Demo Here
Blogger won’t allow you to just add the following code as template :
They will print out errors if you try to save the template. There are certain criteria for making a template for Blogger Blog :
Create Template:
Make sure your blog is using Simple Template.
If not, apply Simple Template to your blog.
We will now add the Basic HTML page to the Template :
Add the title :
Add the Skin with basic CSS that can be changed using Blogger’s Template Designer :
There are more styles that can be inserted in
There are additional CSS files that are loaded by Blogger before
Body
Blogger needs a
The Whole Code
And the whole Template code would be :
Additional Code adding
If you want to display the Posts, add the following code inside
Example :
Now Save template and check out your blog. You will now have a plain blank Blog.
Follow This Tutorial:
Blogger won’t allow you to just add the following code as template :
<html>
<head>
<title>My Awesome Blank Blog</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
<b:skin></b:skin>in the template - A template must have at least one b:section tag
- Every section should have a unique id.
- Correct Syntax
Contents Of Blogger Blank Template:
As we said before, Blogger Templates should meet the criterias of Blogger. A Blank Blogger Template should contain the following :- Basic HTML Page Tags (html, head, body) and their closings
- Only one
<b:skin></b:skin>tag - Need At least a
<b:section></b:section>tag.
Create Template:
Make sure your blog is using Simple Template.If not, apply Simple Template to your blog.
- Go to your Blogger Blog -> Template and click on Edit HTML button.
- Remove the contents of 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></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 :
Skin:
<b:skin>
<![CDATA[/*
body {
font: $undefinedbody.font);
color: $undefinedbody.text.color);
background: $undefinedbody.background);
padding: 0 $undefinedcontent.shadow.spread) $undefinedcontent.shadow.spread) $undefinedcontent.shadow.spread);
$undefinedbody.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>There are more styles that can be inserted in
<b:skin> , but only body’s 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
<b:skin> Body
Blogger needs a <b:section> element in template. So, we should add it inside body.
<b:section id='main' showaddelement='yes'/>The Whole 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: $undefinedbody.font);
color: $undefinedbody.text.color);
background: $undefinedbody.background);
padding: 0 $undefinedcontent.shadow.spread) $undefinedcontent.shadow.spread) $undefinedcontent.shadow.spread);
$undefinedbody.background.override) margin: 0;
padding: 0;
}
]]>
</b:skin>
</head>
<body>
center><h1> Blank Blogger Template </h1></center>
<b:section class='main' id='main' showaddelement='yes'/>
<!-- Please Keep The Credits -->
<center><a href="http://4techblogger.blogspot.com">Blank Template By 4Tech</a></center>
</body>
</html>
Additional Code adding
- Add additional CSS codes inside
<skin></skin> - Add JavaScript codes before
</head>or after<head> - Add HTML codes (widgets, code) inside ..
You can do all the stuff in this template just like you do it a HTML page.
If you want to display the Posts, add the following code inside
<section></section> in body :
<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>Now Save template and check out your blog. You will now have a plain blank Blog.
