How this is done?
A simple HTML Page has a document type description followed by a HTML, HEAD and BODY tags respectively. The meta tags, JavaScripts and style sheets are always added inside the head section and the DIV sections or content is enclosed inside the body section. In Blogger since the template is programmed automatically through dynamic b:section tags therefore we first need to remove all such sections and leave just one because the XML markup tag requires presence of at least on such section. To simplify the process I have created a "Static HTML Theme" that will work just fine for you. You can use this theme to play with exciting new tools, Fancy CSS3 tweaks, and practice your design skills. You will love working on it because it provides you with a much pleasant experience as compared to MBT HTML Editor
Steps To Install the Theme:
- Go To Blogger Dashboard
- Create a New Test Blog
- Give it a title and address
- Choose the Simple Template and not Dynamic Views
- Next Navigate to Template > Edit HTML > Proceed
- Replace all the code inside the editor 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>
<!--
THEME CREATED BY : IndusBhar Dev
DOWNLOAD FROM : indusbhardev.blogspot.com
-->
<b:skin><![CDATA[/*
#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='https://indusbhardev.blogspot.com'>IndusBhar Dev</a>&@ 2012.</p></center>
</div>
</body>
</html>
7. Click save and when prompted about the following error:
Warning: Your new template does not include the following widgets: BlogArchive1 Profile1 Attribution1 Header1 Blog1
simply click on Delete widgets and you are all done!Important points:
- While creating widgets, you will add the JavaScript just below
<head>or above</head> - You will add the CSS code inside the two
yellow highlightedsections - And you will add the widget data or HTML code inside the two green body tags
What you can't do?
Now if you visit the layout section of your blog by going to Blogger > Layout. You will find a blank field with the Favicon Widget only. If you create new posts or pages, they wont appear on your blog. If you have previously created posts then they will remain there, they wont get deleted but unless you add the blog post widget, no posts or comments will appear.
