BlogSpot 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. In order
to understand how these templates are designed
and programmed. You need to start from scratch. I was planning to
release some grid and List view templates but the tough work schedule
made it difficult to do so. However I am releasing today a simple code
that will turn your test Blog's XML structure into a plain, empty
template with no widgets. The entire blogger template consists of
widgets that are operated and managed using classes and IDs. The blog
posts section itself is a giant widget that can be styled in different
ways. To make things simple I will share today how to create a blank
HTML Page out of a Blogger Template and then start adding widgets to it
to experiment exciting new ways of customizing the blog view.
Live Demo
Also check the Colouful tabs Demo page, the menu was added to a blank HTML Page created based on today's method.
7. Click save and when prompted about the following error:
simply click on Delete widgets and you are all done!
Important points:
Also check the Colouful tabs Demo page, the menu was added to a blank HTML Page created based on today's method.
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>
<b:skin><![CDATA[/*
-----------------------------------------------
////////////////////////STATIC HTML THEME////////////////////////////////////////////////////////////////////////////////////////
////////////////////////CODED BY : Mohammad Mustafa Ahmedzai////////////////////////////////////////////////////////////
/////////////////////// DOWNLOAD FROM: www.MyBloggerTricks.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; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://www.mybloggertricks.com'>My Blogger Tricks </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 highlighted sections
- And you will add the widget data or HTML code inside the two green body tags
No comments:
Post a Comment