USEFUL TRICKS- InVaDeR: How to Change Blogger Template Into a Blank HTML Page

XHTML (Extensible HyperText Markup Language) is a family of XML markup languages that use in Blogger.com templates. XHTML 1.0 Strict Document Type was developed by world wide web consortium on 26 January 2000. You can not break the coding rules of XML. A minor mistake in code results in terrifying error messages that you often see while editing your blog template.

Recommend For You: Getting Help For Your Blog On Blogger

If you want to design your own blogger template then you need to start from start. Today, learn about simple code that will turn your test Blog's XML structure into a plain, empty template with no widgets. The blog posts section itself is a giant widget that can be styled in different ways. I always try to make things useful and simple for you so, I will share today how to create a blank HTML Page out of a Blogger Template.

Live Demo

How To Install The Static Theme:

Go To Blogger Dashboard
Create a New Blog For Demo
Choose a Title and Address For New Blog
Choose The Simple Template and Not Dynamic Views
Next Navigate to Template > Edit HTML > Proceed
Replace Whole Template Code With The Following Code:

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html>

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' 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[/*

-----------------------------------------------

********STATIC HTML THEME********
******CODED BY : Gagan Masoun ***********DOWNLOAD FROM: www.BlogsDaddy.com ****

----------------------------------------------- */

#navbar-iframe { height:0px; visibility:hidden; display:none }

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='navbar' id='navbar' maxwidgets='1' showaddelement='no'>

<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>

</b:section>

<div style='margin-top:400px; '>



<center><p><a href='http://www.blogsdaddy.com'>Blogs Daddy</a>© 2012.</p></center>

</div>

</body>

</html>

7. Click Save and When Asked About The Following Error:

Warning: Your new template does not include the following widgets:
BlogArchive1 Profile1 Attribution1 Header1 Blog1

Click On Delete Widgets and Its All Done!

Important Things:

While creating widgets, you will add the JavaScript just below <head> or above</head>
You will add the CSS code inside the <b:skin><![CDATA[/* and ]]></b:skin>
And you will add the widget data or HTML code inside the two yellow body tags

How to Create a Blog Post Widget

Add the following code just above </body> (Yellow Highlighted) to make the Post widget function on your Static HTML Theme.

<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 then go to the layout page again. You can see the Post widget and you can now easily edit its formatting options. Go and create a new post and visit your blog to see it working just fine.Please visit the following link to understand the core basics of data tags.

Kindly Bookmark this Post using your favorite Bookmarking service: