you need to know the following basic concept:
- Blogger doesn’t support more than one file or any directory. So make a single HTML file where you have to put all code. That means, you can’t put CSS, JavaScript code in different folder or file, you have to put all code into one file.
- Blogger supports the only XML to convert. So you have to rename your HTML file (with .html extension) into XML (with .xml extension). But it is not required to know the advance concept about XML. You can start without any knowledge about it.
- Don’t afraid to see them as much complex code in other Blogger template. You will be happy to know that most of the codes are generated by Blogger automatically after installing the template.
4 Steps to Convert your HTML Template into Blogger XML Theme
Before starting the conversion, backup your HTML file to others.
- Open your code editor (Personally I use Sublime Text 3) and paste your HTML code here and save as themename.xml (rename what you want but with .xml extension).
- Cut the all code till
<head>tag to above and paste the following code.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html><html class='no-js' 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' xmlns:og='http://ogp.me/ns#'> <!--<![endif]--> <head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'> - Find
</head>tag and add the following code just before it.
<b:skin><![CDATA[ /**PUT YOUR ALL CSS HERE**/ ]]></b:skin> - Body Customization: Probably you have seen the layout dashboard like below. There are
- How to Create Section Blogger
To create a section you need to write the following code.<b:section></b:section>But it is not enough to show section in Blogger dashboard layout. You have to define the name, unique class, id, how many widgets you want to add to this section. To do this you have to write this with more attribution like below.
<b:section class='section_name' id='section_name' maxwidgets='1' showaddelement='yes'></b:section>
You have to put section code within specific div. But remove all image, anchor, text, header before pasting.
Header: It is required to keep a header section in Blogger theme. Blog name/Logo is shown here. So create header section within your logo div.
Put the following code within your logo div.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='' type='Header'></b:widget></b:section>
Main: Now find the div area where you want to show post, article.
Now put the following code within the article or main div.
<b:section class='main' id='main' showaddelement='yes'> <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'> </b:widget></b:section>
Sidebar: Put the following code within sidebar div.
Footer: Similarly Main and Sidebar do for Footer. Put the following code within footer div.<b:section class='sidebar' id='sidebar' preferred='yes'></b:section>
If you need to add more section, you can add.<b:section class='footer' id='footer' preferred='yes'></b:section>
copy from other website
ليست هناك تعليقات:
إرسال تعليق