Unlike other platforms such as wordpress stand alone or joomla which a template comes with many files ,blogger template is in one file xml only .
As we know ,blogger template contain sections . Here is the order of these sections :
- First ,header
- Second ,blogpost
- Third ,sidebar
- Last ,footer
All we need to do when making a template are :
- Place sections and widgets in right order . Add/remove sections /widgets
- Add HTML arround these sections ,and use CSS to decorating them .
1,Place sections and widgets in right order .Blogspot is made up with sections ,widgets... so you have to place them in right order ,add more sections /widget for the function you want and remove unnecessary sections /widgets .
For example ,in Simplex Blognews template ,I add more sections for page list ( in the top of page ) ,sections for advertising banner ...remove default sections and widgets in sidebar .
I also use conditional statement <b:if> to hide sections/widget in some specific cases . For example ,we all know blogpost widget show the post list /single post (see the post on blogpost widget here) ,but in the homepage ,I don't want it to show up ,so I use a conditional statement to cover all blogpost widget
<b:if cond='data:blog.url == data:blog.homepageUrl'>
blogpost widget .....
In the code above ,if the current page is homepage ,it will show homepage content , if the current page is a category page or single post ,it will call blogpost widget for processing content .
Or if we want to hide all the blog content when go to a specific page ,we can use a conditional statement like that :
By add/remove widgets and place them in right order,we have the frame of a template .<b:if cond='data:blog.url == "page url"'>.....<b:else/>other content here</b:if>
2,Add HTML and CSS around sections/widgetsWe have a template's frame with sections and widgets,now we need to add more HTML tags around and decorate these HTML tags with CSS to make it display as we want : some images ,some text in bold , fonts ....you can do all of them in this step .
Firebugs is the best tool for this work ,you can find the post on how to use this tool here . It will reduce your time on working with CSS and HTML .You can use this tool to inspect elements on websites which has design you want and find out which HTML/CSS their designer used . CSS tags information and cheatsheet can be found in this post .
To get some inspirations ,you can go to template galleries ,collections ,or go to famous blogs on design . Sometimes ,combining the elements which you love in various templates can give you an unique design .
That's all steps I applied when making a template and it work for me ^^ I can't tell you how to make a specific template ,because it's very long and take times . I hope with series 'how to make a blogspot template ' you can :
-Understand the basic of a blogspot template ,structure,what it contain
-Functions of sections /widgets,how they work .Meaning of data tags /Api and statements.
-General steps to make a template,what we have to do ,what we have to search in google for making an elements ....
By reading all posts from start to the end ,I hope every time you see the code of Simplex templates ,you can understand what I did,and then make your own customization ,you can also apply them in making your own template .
It take time to search,read and then apply to make a template . It's not easy . But if you want ,you can do it .Thanks for supporting me all the time .