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.

Blank Template / HTML Page In Blogger.


Demo Here


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 :
  1. There must be skin
    <b:skin></b:skin> in the template
  2. A template must have at least one b:section tag
  3. Every section should have a unique id.
  4. 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 :

  1. Basic HTML Page Tags (html, head, body) and their closings
  2. Only one <b:skin></b:skin> tag
  3. 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'/>
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: $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.


Labels:

Post a Comment

[blogger][facebook][disqus]
switcher
Layout
Boxed Full
Boxed Background Image
Main Color
#007ABE

Shawon Khan

{picture#https://1.bp.blogspot.com/-BDYMzedJdjs/UAI7F8ZNFKI/AAAAAAAAACY/yhMlXb-dkDU/s50/avatku.jpg} Nor is it at all prudent for the hunter to be over curious touching the precise nature of the whale spout. {facebook#http://facebook.com} {twitter#http://twitter.com} {google#http://google.com} {pinterest#http://pinterest.com} {youtube#http://youtube.com}

Contact Form

Name

Email *

Message *

Powered by Blogger.