Convert Your Blogger Blog In A Blank Web Page
Well first of all let me clear you what actually a blogger template is. Blogger template is a template made with xml language which consists of widgets which are operated using Classes and IDs. Even when you see the blogger layout tab, you will find that the blog posts area is also a widget that can be customized and styled in different ways. A basic html page contains html, head, title and body tags. But, blogger template is a dynamic and auto controlled template which is controlled by b:section tags, so we need to remove all the b:section tags and keep at least one b:section tag to keep our blank template working fine. So, let's start:
> First of all, create a new blogger blog (select any name because it's just for testing)
> Now, go to dashboard>Template>Edit HTML and Proceed.
> Now, delete all the template code and copy and paste the following code in your template's html 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[/*
-----------------------------------------------
/// Blogger Blank Page Template ///
/// Designed By : Ashutosh Kushwaha ///
/// Source : http://ashutoshthehacker.blogspot.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>
</body>
</html>
> Click SAVE and if blogger prompts to delete any widget, just click on Delete Widgets and that's all.<!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[/*
-----------------------------------------------
/// Blogger Blank Page Template ///
/// Designed By : Ashutosh Kushwaha ///
/// Source : http://ashutoshthehacker.blogspot.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>
</body>
</html>
> Now, you can customize your template as you wish and can convert your blog in a website also. For example, if you want to add javascripts, then you can insert javascript codes between <head></head> section. If you want to use CSS codes, then you can add them before ]]></b:skin> and to add widget data or any custom code, then you can use them between <body></body> tags.
0 comments:
Post a Comment