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 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 :
If the above criterias are met, Blogger won't produce any errors when saving the template. For creating a blank HTML Template, we will make sure these criterias are met.
As we said before, Blogger Templates should meet the criterias of Blogger. A Blank Blogger Template should contain the following :
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>
<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>
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>. If you want to disable that, see this post.
Blogger needs a <b:section> element in template. So, we should add it inside body.
<b:section id='main' showaddelement='yes'/>
This section is the main section of the blog where we can add gadgets to it.
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="http://www.pbprakash.com/">Blank Template By pbprakash.com</a></center>
</body>
</html>
If you want to display the Posts, add the following code inside <b:section></b: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>
Save your template and check out your blog. You will now have a plain blank Blog.
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
If the above criterias are met, Blogger won't produce any errors when saving the template. For creating a blank HTML Template, we will make sure these criterias are met.
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 :
<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>
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>. If you want to disable that, see this post.
Body
Blogger needs a <b:section> element in template. So, we should add it inside body.
<b:section id='main' showaddelement='yes'/>
This section is the main section of the blog where we can add gadgets to it.
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: $(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="http://www.pbprakash.com/">Blank Template By pbprakash.com</a></center>
</body>
</html>
Additional Code adding
- Add additional CSS codes inside <b:skin></b:skin>
- Add JavaScript codes before </head> or after <head>
- Add HTML codes (widgets, code) inside <body>.
- 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 <b:section></b: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>
Save your template and check out your blog. You will now have a plain blank Blog.
No comments:
Post a Comment