October 14, 2012

Widgets

XHTML To HTML: Blogger Template Conversion


XHTML to HTML Blogger templatesI already shared how a dynamic XHTML BlogSpot template could be converted into a blank Static HTML Template, but what if you needed to keep the same design of your blog and only remove the Dynamic objects like widgets. This could easily be achieved by carefully converting the XHTML format of code structure to Basic HTML 4.0 File. This will enable you to even embed or add a PHP or ASP.net code inside the Cloned BlogSpot design in HTML format. A live example is our Contact page with a PHP contact Form. It is not possible to add PHP inside blogger templates because no direct access to web hosting ftp account is available so far. When you visit our contact page, you will feel like you are still in BlogSpot template environment but in reality its only a Cloned HTML design of the original template. The steps today are interesting and fun to try. Make sure you have a webhosting to try today's tutorial. We are using hostgator as our blog web host to host all our files and resources.

This is our new series and would be fun sharing all the new development tips.

XHTML To HTML
Part1: XHTML To HTML: Blogger Template Conversion
Part2: In Progress...
Part3:

Purpose of This Tutorial

Purpose: XHTML is composed of XML and HTML 4. In this series we will learn to remove the XML portion of code and leave HTML 4 alone. Thus we will be able to create a static HTML Clone of a blogger template.

Download and Study your Template

  1. Go To Blogger > Templates
  2. click Backup/restore
  3. Download your template
  4. Right click the downloaded xml file and choose "Open with > wordPad"

Study the template:

Every webpage has the following concrete HTML structure. Only the DOCTYPE element would differ in different platforms.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


<html>

 

<head>


</head>


<body>

</body>


</html>

A webpage consist of 4 important sections

  1. The DOCTYPE defines the type and version of web language being used in the page. In Blogger & also wordpress the type is defined as XHTML and version as 1.0. The only difference is that wordpress uses transitional XHTML while Blogger uses the strict unforgivable version.

    Blogger doctype looks like this. You will find it at the top of your downloaded file.

    <?xml version="1.0" encoding="UTF-8" ?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    The bolded part is the declaration for XML so that custom tags created using xml could be identified by the compiler. You wont find the bolded part in Wordpress blogs instead you will find the PHP opening tags.

  2. The html tag enclosed both the head and body tags
  3. The head tag is where you add all your stylesheets (CSS) , scripts (JavaScript, jquery etc.) and meta tags (for SEO & platform compatibility purposes). Code inside head tags are visible to browsers only and not visible on webpage to visitors.
  4. The body tag contains your main content. This is the area where you add your Blog header, navigation, post section, sidebars and footer. Code inside body tag is visible on webpage. Any thing you add here will appear on your site and visitors will be able to see it.

Now if you open the downloaded XML file you will observe that the template has the same core HTML structure as we discussed above. Press CTRL + F to find the tags.

All you need to do now is to  identify the dynamic code sections and remove them from the template leaving behind static objects along with their related stylesheets and scripts. For that stay tuned for part2!

The Browser Wars

The day Netscape introduced their custom HTML tags which only their browser could interpret, started an ever growing war between browser companies like IE, Firefox, Opera, Safari and opera. Designers were finding it difficult to create a code that was compatible with all browsers, thus W3C stepped in and introduced XML. XML was used to write other web languages and was a common standard for all browsers. Since most pages were already coded in HTML using tags that no more are supported by modern browsers today, XML was use to create advanced HTML called XHTML. Since then XHTML has remained the standard to create fancy and colorful webpages. The same language is use to code Blogger and Wordpress platforms.

To understand what is the basic difference between XML, HTML and XHTML, I would highly recommend that you read the great article written by hubpages folks.

Got Questions?

If you have any questions related to the code format above or a similar questions, please post your queries in the comment box below. In our coming tutorials we will be diving deep to explore the exciting combination of  webhosting with Blogger hosted blogs. Peace and blessings 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 »

36 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. Just returning to be the first to comment.

    Just rock us Mohammed.

    ReplyDelete
  2. This post series is going to be one of the most effective series for all the newbies I guess. Every blog designer should know how the template actually been made . Hope you rock it. :)

    ReplyDelete
  3. Nice Work ! Mustafa bhai is back with a bang !! :D
    Exciting Bluetooth Names

    ReplyDelete
  4. WOW bro, this series will be very useful to new bloggers for designing blogger templates.

    ReplyDelete
  5. thanks for a great information..

    Akhil Abraham
    Blog:All Blogging Tools.com

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

    ReplyDelete
  7. Hi

    In your post you mentioned Blogger uses the strict unforgivable version. But In my blogger template showing transitional DOCTYPE. Is there any problem for using transitional DOCTYPE in blogger template ?


    ReplyDelete
  8. very useful post bt my ques is different.
    sorry for that

    my blog is Widget Generators

    I'm using MBT template bt m not able to see OR add Read More Buttons in it.

    plzzzz help me.

    ASAP

    ReplyDelete
  9. This information is really great man..
    Keep it up.

    ReplyDelete
  10. Now MBT is following previous path of interesting posts.Another great post after static html page for all bloggers. Waiting for next post of this series.

    ReplyDelete
  11. This is another wao, this will help a lot, I have been battling with these differences in html and xhtml this days, can't wait for part 2 to be released. Weldone Mohammad. <3

    ReplyDelete
  12. very useful information, but plz write an article on how to convert wordpress themes to blogger templates. it will be interesting.


    Latest Tech Articles and Freewares

    ReplyDelete
  13. Awesome Post .

    Regards,
    Navneet
    http://techravers.com

    ReplyDelete
  14. Mustafa yr i want to add credit footer like urs help me buddy.

    ReplyDelete
  15. Could you give me a little explanation about the diffrence between XHTML and HTML? What is the advantage of HTML?
    Thanks

    ReplyDelete
  16. @Elena MinovaXHTML is a family of XML markup languages that mirror or extend versions of the widely used Hypertext Markup Language (HTML), the language in which web pages are written.



    ReplyDelete
  17. Assalam-O-Alekum Mustafa bhai, Just a suggestion Why you are not opening a Third Blog WordPress Tricks and Tips really need help in WP :( Now Stucked in how to implement AdSense Code in WP.... Waiting for your reply!

    ReplyDelete
  18. Woah 20 Comments i thought to be the 1st one. OH! Yes, This article is posted by our Mustufa Bro so you can expect some extra Attention.

    Wow Dude perfect time and perfect tutorial, I Think lots of People that are not made to code would surly take some benefits from it.

    Bro, Why don't you reshape MBT :) The Theme is bit OLD and we have more powerful SCRIPTS and CSS. May be a Bit Final Touch is Required (IT ONLY MY Though)...Peace

    ReplyDelete
  19. Assalam u Alaikum Brother,
    I was looking for subscription widget. I found “MBT” which is fully equipped with the nice lab, demo, and clear instructions and you just do not keep your readers engage but truly giving them genuine posts.

    Mashallah, you are doing a good deeds, I've browsed and used some of your widgets and its working fine.

    Thanks
    Rashida Shaikh

    ReplyDelete
  20. Aslam-0-Alykam

    Plz help me frndx..
    i registerd a new domain for my blog... but when i aplying to my blog after all DNS cname recods setting....its not working giving me this error

    You're about to be redirected

    The blog that used to be here is now at http://www.awaargi.com/.
    Do you wish to be redirected?

    This blog is not hosted by Blogger and has not been checked for spam, viruses and other forms of malware.

    yes No

    and when i hit yes

    Oops! Google Chrome could not find www.awaargi.com

    this happend

    what i do..???

    ReplyDelete
  21. Thanks For Sharing This Post. I need it


    Regards
    Rahul Kashyap
    Blog: SDMMovies.com

    ReplyDelete
  22. Thanks for this Awesome Post..
    i really needed it..
    i like many blogger templates but i could'nt use it without Blogger..
    but this This guide i will be able to.. thanks!
    Tricksme.in- Technology Blog, you will Love

    ReplyDelete
  23. wow,this is very nice tutorial and i read this tutorial very nice feeling.thank you so much.
    Best of luck.
    Web Designing Services

    ReplyDelete
  24. Hello, as a new blogger, I have a nice feeling to read this post. I had a problem just now. My blogger template has been deleted accidentally but forgot to save the template. I have accessed the recently cached code. When I copy and paste the same it shows errors. Please help, I am novice in blogging. Applied for adsense, please reply urgently!

    ReplyDelete
  25. Hello,Bloggers,i am new in the blog world.i am blogging at wordpress and blogspot.this is so useful article for me...
    visit my blog
    www.mayursuppliers.in

    ReplyDelete
  26. Still waiting for next posts of this series.

    ReplyDelete
  27. But when will the other posts in tis series come back.

    ReplyDelete
  28. I have read many blogs and found good and informatics but this blog has simply thrill me with it designs, colour combination and the most important thing real information. I have found only genuine and useful information on this blog.
    Web Design Company

    ReplyDelete
  29. Thank you very much for sharing. I have already converted blogger template to a blank HTML page. For this, I have removed xml tag and widgets sections. It looks same as my main blog templates. New HTML blank page can be easily customized.

    I have shared the tutorial here Convert Blogger XML to HTML

    ReplyDelete

Support Us

We have educated thousands of bloggers online and made several people Make a living Online. If our Tutorials have really helped you a little, then kindly show your love by using the badge below:-

Blogger Widgets

or try a Beautiful Banner

Widgets

 
  • 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!

About The Author

Hi! I am Mohammad, a certified SEO Consultant, Pro Blogger, Computer Engineer and an addicted Web Developer. STC Network was founded in 2008 and it is currently the country's first registered company of Professional Bloggers. Read More..

Recipes

SEO Affiliate Marketing Social Media

Make Money Online Web hosting

Blogging Tips Web Designing

Plugins and Widgets Blogging Ethics

Subscribe

Recent Comments

Popular Series

Powered by:

My Blogger Tricks © 2013. All Rights Reserved | Contact |