September 8, 2012

Convert Blogger Template into a blank HTML Page


turn blogger to blank pageBlogSpot 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.

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:

  1. Go To Blogger Dashboard
  2. Create a New Test Blog
  3. Give it a title and address
  4. Choose the Simple Template and not Dynamic Views
  5. Next Navigate to Template > Edit HTML > Proceed
  6. 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>&#169; 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

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.

Create a Blog Post widget

create blog post widgetNow 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.
To understand Google blogs programming, you will need to familiarize yourself with standard layout and widget tags. The best reference is provided by Blogger team itself. Please visit the following link to understand the core basics of data tags.
I also recommend using Codelobster for Designing web pages on your desktop or localhost.

Can you create a website now?

By turning the template into a static version, you can now easily create HTML web pages. Showcase your portfolio, promote your Ebooks by designing a download page for your Ebook and do whatever you want!

Your views

I hope this tutorial might have helped you to better develop and design your blogs. I am keeping the tutorials easy for the sake of better understandability. The future posts will teach you how to change the post list display and use tabs to switch between a grid or list view of posts on homepage. We hope you find this effort useful. All that we aim is improving your skills so that you may turn out to be far better designers, developers and bloggers. If you need any help, you are most welcome to bug me with as many questions as possible. Please take good care of yourselves and your loved ones. Peace buddies. :)




If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

52 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. This comment has been removed by the author.

    ReplyDelete
  2. Mustafa Jan,

    First of all Salam to my brother;

    It is a great start with designing a blogger template. Your posts makes this blog more shiny and dynamic. Hope to see you in future with such great tutorials.. Proud on you.

    ReplyDelete
  3. This post is related to the comments that I wrote in the previous post .... I hope you can respond to these comments. You do your best to teach us from the basic so it can be understood well

    ReplyDelete
  4. I Want to convert A Wordpress theme To blogger Template, How can i convert..Plz write an article for me..Eagerly Waiting For That. Thank you.

    ReplyDelete
  5. Amazing tutorial bro. i think this is fully helping those are migrating their blogs.

    Visit: Premium Blogging Tips.

    ReplyDelete
  6. we can make it possible with css easily

    ReplyDelete
  7. thanks for giving nice information...

    ReplyDelete
  8. good i like if annyone need squezze page on blogspot Iam ready to do it .

    thank you Mustafa.

    ReplyDelete
  9. I had searched on Google for the basics of blogger template but couldn't able to find a better one there.This time you give a complete idea,very well explained post and easily understandable one.I always wait for you,because you came with a unique ideas and a stunning post.Hoping you will further post about blogger template structure in similar manner.

    MyTechPromo.com

    ReplyDelete
  10. I already read the post yesterday night but was on the phone so couldn't comment. The tutorial is awesome and I do have a good amount of questions as usual :p

    1. Please explain what are those b:version='2' and those xmlns attributes. What will happen if I just remove then and use something like just html lang='id'.

    2. Those xmnls attributes and X-UA-Compatible is not being validated with HTML5 doctype. Will removing them harm. Or else how to correct.

    3. Can I use % like 90% width in the meta viewport tag.

    4. Is it good to use that $ CSS. I think its a SCSS, isn't it? Forgive me, I don't have much knowledge on that. I still use the normal CSS because the former and other extensions confuses me. Which u recommend. SASS, LESS or SCSS.

    Those are some questions coming in my mind right now. Will ask more if they come. I didn't checked CodeLobster as I was just using Notepad++. Will give it a try.

    And I will not only take care of myself and loved ones, but also will take care of others whom I don't know personally ;) and I expect the same from you.

    Once again a great tutorial and I don't say this often you know that :p

    ReplyDelete
  11. And yea please check my reply in your mail. Its about wordpress and still seeking for a solution.

    ReplyDelete
  12. This is the most awesome tutorial i have ever seen and also i will ever see. Thanks for it very very much..

    ReplyDelete
  13. awesome post sir i was founding this method so thanks for this post.www.dynamictrick.in

    ReplyDelete
  14. Awesome Tutorial Brother..!!
    really very Useul.
    i like many blogger templates, i Willed that it could be of simple HTML page
    but now with this Post it is possible..
    Thanks!!
    Tricksme.In-The tEchNology Blog

    ReplyDelete
  15. Nice coding bro. You always come with something new and unique. I have a question. As you mentioned post field is also a big widget so is it possible to provide jquery effects in the post. Straight to the point i seen flipper jquery slides opens like book pages and i want to provide the same effect in post section. I am trying it from last 15 days but no success. So kindly guide me.

    ReplyDelete
  16. Pages not working. How do i make it work with the above template?

    ReplyDelete
  17. Thank you so much for this amazing tutorial Sir, in terms of technicality of XML you are the best! :)

    ReplyDelete
  18. really awesome no words for your amazing work Musfata buddy I was looking for it from so many days!

    Blogger Widgets, My Blogger Tricks Template, Giveaways, Free Ad Spots and more only on Blogger Freaks

    ReplyDelete
  19. This comment has been removed by a blog administrator.

    ReplyDelete
  20. thanks for sharing this post. really you solve my problem :)

    visit my Entertainment Ads page : http://sdmmovie.blogspot.in/

    ReplyDelete
  21. Hey How to full approved Google Adsense new account??? pls, help me all... :D

    ReplyDelete
  22. The story can be an inspiration ... Do what you love, when love the balls why not make a ball about, if you like the music why not write music ... you will better understand what you like

    ReplyDelete
  23. i am getting this error(bX-ong0b1) when i create a page can u help out thansk

    ReplyDelete
  24. can anyone send this whole template to me @ jazbatv@yahoo.com
    thanks i ll b thankfull to u if anyone can send whole template code. bcoz i didnot understand this mathod, i need full zip tempate ... thanks in advance

    ReplyDelete
  25. Nice information you’ve posted Fobble Up! Always Up!
    Thanks for posting good Article Software
    Your post is very useful Blog Tips and tricks I will surely
    like and join ur site in future, be in adding good posts to ur site. peace and blessings.
    Thanks…:)

    ReplyDelete
  26. Not work; Error parsing XML, line 2, column 6: The processing instruction target matching "[xX][mM][lL]" is not allowed.

    ReplyDelete
  27. Thanks mohammad, you tricks is helpfull.. Can I make article in http://codestyle.blogspot.com for this example. Simple and creative.. Good job..
    Follow me: twitter.com/ycusoy

    ReplyDelete
  28. This comment has been removed by the author.

    ReplyDelete
  29. convert to blogger price cheap
    contact yahoo id: convert blogger

    ReplyDelete
  30. is there any way to use wordpress template in blogger? wordpress templates are zipped files while blogger templates are single xml file, is there any way to convert that zipped file into single xml?

    ReplyDelete
  31. This Theme is good to start from the beginning .

    ReplyDelete
  32. Thank you bro..
    visit my new blog at: Bloggerjin

    ReplyDelete
  33. thks a lot for the tuts .
    it really help beginner like me
    thanks

    ReplyDelete
  34. This comment has been removed by the author.

    ReplyDelete
  35. i tried on my blog but Google say spam detection and he delete my blog .... plz help

    ReplyDelete
  36. Really I am impressed from this post...Thanks for posting I really like this blog ! The person who created this post is a genius and knows how to keep the readers connected.
    Web development Company

    ReplyDelete
  37. I done it but My adsense adds are not showing ON PAGE, help me plzzz

    ReplyDelete
  38. my dear friend your given code has got error, i have fixed that code at line 2 this is code


    thank you

    ReplyDelete
  39. Thanks it just works fine. but i am not able to add any pages to the blog can you please tell me how to add pages to your template

    my blog : http://shuffle-tusup.blogspot.com/

    ReplyDelete
  40. I want to testify on the works of
    DR EZIZA. He is a great man who
    was able to
    cast a spell that brought to me
    the woman I
    love .This man is able and
    capable to solve
    any problem of yours. He is
    specialized in
    the following:
    (1)Spell for protection from
    danger
    (2)Spell for magic
    (3)Spell for same sex love
    (4)Spell for healing
    (5)Spell for invisibility
    (6)Spell for riches and fame
    (7)Spell to get a good job
    (8)Spell for strong love and
    relationship
    (9)Spell to bring your ex back
    This man has great powers and
    is incrediblly
    generous.You can contact him on ezizaoguntemple@gmail.com or +2348058176289
    He can help you without stress try him today...

    ReplyDelete
  41. could you please share top bar script as showing in top & how to add top bar in this page thanks

    ReplyDelete
  42. Great tutorial can you tell me how to link or import css and js files?

    ReplyDelete
  43. adsense ads are not working on blank templte ! how to show ads ? plz tell me urgent.

    ReplyDelete

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!