Monday, November 5, 2012

How to Change Blogger Template Into a Blank HTML Page

Author: Gagan Masoun
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:

  1. Go To Blogger Dashboard
  2. Create a New Blog For Demo
  3. Choose a Title and Address For New Blog
  4. Choose The Simple Template and Not Dynamic Views
  5. Next Navigate to Template > Edit HTML > Proceed
  6. 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; '>
<!--Please keep the Credits intact-->
<center><p><a href='http://www.blogsdaddy.com'>Blogs Daddy</a>&#169; 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:

  1. While creating widgets, you will add the JavaScript just below <head> or above</head>
  2. You will add the CSS code inside the <b:skin><![CDATA[/* and ]]></b:skin>
  3. 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.

Can I Create A HTML Website Now?

Now, you can now easily create HTML web pages. Showcase your portfolio, promote your other blogs by designing a list page for your other blog and do whatever you want!

My wish is improving your skills so that you may become a better designers, developers and bloggers. If you need any help, you can ask any time via comments. Stay Blessed and Love You All!

Author
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.

8 comments:

  1. Useful tips Gagan, One can also hide the latest post and make a any blogger template by just hiding the Blog1 and any such applicable widget.

    Example can be found here :
    http://about.ksnworld.com/

    ReplyDelete
  2. can I import css and js files that I have stored on cloud service? If so how and where to I put them?

    ReplyDelete
  3. You can use them by giving source link to the css or js files. You can directly paste css code in blogger template.

    ReplyDelete
    Replies
    1. Great thank you I got that now but when I create a new page and type in the text i want it does not show up it is just a blank page with the template itself. Is there a widget or something i need to add? http://budsemporium.blogspot.com/

      Delete
    2. It seems like your css is missing.

      Delete