Monday, July 11, 2011

How to make a blogger template : Blogger template structure

Blogger team tried to make their product more easier to use and customization for all users with their template design funtion . If you want some changes in fonts ,background ,layout...,this function can help you . But if you want more ? want to make your own blogger blog look like a professional website ? It's time you need to know something about structure of blogger template ,apis ,scripts ... to make your own .
I will make a post series on How to make a blogger template ,so you can make one for yourself or can do the customizsation easily . I will try to make it short ,and easy to understand , hope it helpful for you .



Here is the first post on this topic : Blogger template structure

Blogger template is written in xml markup language ,a  complete template has 4 section as mentioned bellow(this is my way to describe a template ,not Google ^^ )

1,The first section will contain something like this
This part will define the document bellow is in xml format ,the standard of this xml ,and something else related . I'm not a professional developer and do not know much on xml ,so I can't explain you more about this part ^^ This part is required but fortunately ,we don't need to make anychanges on them .

2,The second section : This section start from <head> to <b:skin> , it contain necessary tags for header ,meta tags , link to favicon... like other html documents . In this section ,we can add favicon ,adding some meta tags for description ,keywords ..

3,The third section : Start from <b:skin> and end at </b:skin> ,it contain CSS tags ,that set the appearance of your blog . This CSS define how an element in blog look like ,such as text color ,font size ,color ,background ... All tags in this part are follow the standard of CSS without any exception or 'CSS tags for Blogger only' ,so if you have some basic knowledge on this field ,you can easily modify them as you want .

4,The forth part start from <body> end at </body>  :  the main part of a template ,it made up primarily with 'section' and 'widget' . In sections and widgets ,there are Blogger APIs for specific tasks .
We have many 'sections' ,one for showing posts ,others for show banner in header ,or showing footer ...
In the section for showing post ,we have widget for showing single post , widget for showing posts in categories ,widget for showing posts in homepage ...
In a widget ,for instance ,widget showing single post ,we have Blogger APIs for showing date ,time ,post header ,post body ...

Beside APIs,we can use HTML tags to arrange elements and make them display as we want .
This is similar to Wordpress template ,if you ever work with them before .

Other element that I usually use in Simplex's template is scripts . Scripts can be anywhere in part 3 and 4 ,but in some cases ,we need to grouped them or move them to the end of template (before </html> ) to avoid conflicting .
That's all for template structure ,in the next posts ,I will go deeper in each part .

No comments:

Post a Comment