Important: All scripts hosted on widcraft.googlecode.com don't work anymore because Google has blocked that SVN repository.
Blogger templates are codded using the *XHTML 1.0 Strict Document Type*. It was developed by world wide web consortium on 26 January 2000. Unlike PHP or ASP.net the rules of XML are strict and unforgiving. A slight mistake in code results in terrifying error messages that you often see while editing your blog template.
So here we're going to show you how to convert your blogger template into a blank template for all your HTML related work or any project you're going to do. All credits of this post goes to MBT.
Installing Template :
- Go To Blogger > Template > Edit HTML > Replace full template code with 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////////////////////////////////////////////////////////////////////////////////////////
----------------------------------------------- */
#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; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://www.widcraft.blogspot.com'>Widget Craft </a>© 2012.</p></center>
</div>
</body>
</html>
- Click On Save.
- Click save and when prompted about the following error:
Warning: Your new template does not include the following widgets:
BlogArchive1 Profile1 Attribution1 Header1 Blog1
BlogArchive1 Profile1 Attribution1 Header1 Blog1
- Simply click on Delete widgets and you are all done!
Editing This Template :
- While creating widgets, you will add the JavaScript just below <head> or above </head>
- You will add the CSS code inside the two yellow highlighted sections
- And you will add the widget data or HTML code inside the two green body tags
Adding A Widget :
Now to give you an idea of how easily a blogger template could be designed from scratch simply add the following code just above </body> 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 visit the layout page again. You will be able to 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. Congratulations! you have created one of your first blogger widgets. Play this way with some exciting new widgets and find out how creative you could go.
Important: Check our new website TricksPanda.com for WordPress tutorials, plugins and more.
