Blogger Template Design: Tutorial 2

• Tutorial 1: The Structure of a Blogger Template
• Tutorial 3: The Structure of CSS Styling Section

Here's what the structure of a Blogger template code looks like, in a simple way of looking at it. I'm using my Generic Blogger template as a reference, but the idea is the same for other templates also. I've separated the code in 3 sections and show only the top lines of each section so you can look for the starting lines later on.
Section 1:
The 'header' of the code. Basically it contains important information about the template code and the title of your blog. Best of all, you don't have to worry about anything in this section. It's a standard header for all templates. The only time you add some codes here is when you want to put some meta tags (additional information about your blog for SEO).

Section 2:
This is the CSS Styling Section. CSS stands for Cascading Style Sheets, a web language used to control the style of a HTML document. This is the section that you want to know the most if you want to modify your existing template or design a new template. Eventhough it is a web programming code, you can still do a lot of things on you template design if you understand the structure of this section without knowing much about HTML and CSS. We'll get to this part in more detail later.

Section 3:
This is the Body or Data of the code - the most important part that fetches all your content from Blogger database and puts it in the right place into your blog when somebody is looking at your blog. This is also the section that tells your blog which part comes first - the Header, Sidebars, Main, Post, Footer, etc. But it doesn't set the appearance of the blog and how it would look like on the internet (because that part is controlled by the CSS styling section).

You basically don't have to worry much about this part too, just like the 1st Section. But you will have to know a little bit about this section if you want to start adding extra widgets that cannot be put using the Add Page Element button, like the social bookmarking buttons - Digg, AddThis, RSS buttons; or if you want to put Adsense codes in special places like in the Post Page; or putting Google Analytics code to track visitors to your blog; and many other things. Most of the time, there are easy instructions already available to help you add these things in your blog. So, again, nothing much to worry about in this section.

Labels: Make Template, Tutorial

---