Thursday, May 18, 2006

Blogger template tutorial: Components

The Blogger template comprises 3 main components - the cascading style sheet (CSS), Hypertext Markup Language (HTML) and the Blogger tags. Components of the template will be illustrated by examples from the Blogger Minima template by Douglas Bowman.

Hypertext Markup Language

A HTML file contains markup tags which tell a Web browser how to display a Webpage. The first tag in a HTML file is <html> which tells the browser that this is the start of a HTML document. The last tag of a HTML file is </html> which tells the browser that this is the end of the HTML document. With a few exceptions, HTML tags always occurs in pair, an opening tag and a closing tag. An example of HTML tags which does not occur in pair is the line break tag <br />.

The information between the <head> tag and the </head> tags is header information. Header information is not displayed in the browser window. The cascading style sheet is contained within the <head> tag and the </head> tags.

The information between the <body> and </body> tags is the information that will be displayed in your browser. <div id="header"> signals the start of the information that will be displayed in the header. <!-- and --> are comments tags and text and tags contained within the comments tags are not acted upon, and is only for the purpose of making the HTML clear to the people reading the HTML document. <!-- Begin #content --> tells readers that this section is the start of the content section, <!-- Begin #main --> the beginning of the main column and <!-- Begin #sidebar --> the beginning of the sidebar.

It is a good idea to have a basic knowledge of HTML. To learn HTML online, go to HTML Tutorial.

Cascading Style sheet (CSS)

The cascading style sheet controls the overall style and layout of the web page (how HTML elements are displayed). It is placed in between the <head> and the </head> tags in the beginning part of the template and is bounded by the <style type="text/css"> and </style> tags. */ and /* surround things meant as comments (information). It is only meant for the person reading the template and is not acted upon by the browser. The CSS syntax is made up of a selector, a property and a value in the following syntax: selector {property: value;}. For example, in the Minima template: body{background: #fff;} means that the background color of the blog is white (#fff is the hexadecimal code for white). If you change it to body{background: red;}, the background color will change to red.

For an examples of modification of the CSS, refer to How to change the width of the content column and the sidebar, How to make an image as a background for your blog. To learn more about CSS, go to CSS Tutorial.

Blogger template tags

When you submit a post to Blogger, it gets saved into their database. When you open a page from your blog, this is when Blogger tags come into play. Blogger tags tell their blog publishing program which information to fetch from the database and put on the web page.

There are 2 main types of Blogger tags: item-level tags and page-level tags. Item-level tags are those tags that have the $ sign in them, such as <$BlogItemAuthor$>. The tags get the actual information from Blogger's database and put it on the web. <$BlogItemAuthor$>, for example, display the blog author's name.

Page-level Blogger tags deal with the design and structure of a page. They tell item-level tags when and where they have to perform. For example,


commands that this is where the browser have to display Archive URL and the Archive Name.

To see an example of the placing of Blogger tags when the information from Blogger database is not fetched from the servers, see example

For a complete list of Blogger template tags, go to Template tag list.

This site may help you understand further: Blogger Template Anatomy

Related posts:
Adding content via the template
Blogger template tutorial: 3 column template
Blogger Beta: 3 column template

Books from Amazon

Publishing a Blog with Blogger : Visual QuickProject Guide

Essential Blogging : Selecting and Using Weblog Tools



  1. Thanks for stopping by. Even I havent been blogging lately, was too busy with other stuff.

  2. using serif font on web pages is bad, plus the grey color and small size...

    design over function?

  3. How do I leave just the 1st sentance of my PROFILE on my home page and the rest on my "Profile" page..I can't seem to find the answer to this..anywhere?
    Thanks so much if you get the chance!

  4. Remove this from your template:
    <!-- Begin #profile-container -->


    <!-- End #profile -->
    or if you don't want to remove it, comment it out. See How to comment out your profile

    Then leave a text link to your profile page in its place. For example
    &ltp><a href="URL of your profile">See My Profile</a></p>

  5. Anonymous11/14/2006

    Peter is there any way I can stop one particular blogger from commenting or viewing my blog? this person has used some comments I made and changed them to anonymous she denies it says it cannot be done so I did I just copied and pasted the comments I had made deleted them and recommented using what I had copied under anonymous I guess my comments had merit but I thought it unethical So i wondered if I could just bar her from commenting at least better still stop her seeing my blog..I am on Beta. hope you have an idea or two

  6. There used to be a (not fool-proof) to do it. See post How to ban a person from your blog or Website.

    Unfortunately, the last time I check, the site that enable one to do it was taken offline. Maybe they come back online again. If you find that what is described in that blog works/don't work, hope you will report back.

  7. Anonymous11/14/2006

    I will get back to you on it Peter if not on here i will mail you but it will most likely be as a comment it looks dificultish but I am going to give it my best shot.
    thanks for your invaluable advice as you have helped me before

  8. Anonymous1/04/2007

    err why i copy the css from the blogskin n past it onto 'edit template html' but the system prompt n sae "Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: The content of elements must consist of well-formed character data or markup." n wad doed tis mean n wad should i do to it???

  9. Are you trying to copy the CSS from a classic Blogger template into a beta (new) template? You can't do that.

  10. hey peter, so what do u recommend i do? i'm desperate; i really want a nice blogskin but unfortunately i'm using the new blogger. perhaps u could recommend a site that has templates designed for new blogger? or can u teach me how to edit the code so it can be accepted? please reply quickly, i'm very desperate... =P


  11. There are many ready made templates for New Blogger now. The one I like to use is Ramani's
    3 column template for New Blogger (formerly Blogger Beta). That is the template I am using for my main blogs. The reason why I chosed this template over the others I think I will write a post when I get the time in Blogger Tips and Tricks.

    If you don't like Ramani's template, there are others:
    3 column templates for New Blogger (formerly Blogger Beta) modified by Stavanger
    More New Blogger templates modified by Stavanger
    New Blogger template for posting large photos, etc.

    Or you can try to add a third column to your current template:
    New Blogger template tutorial: Adding a third column to your blog

    Dummies Guide to Google Blogger

  12. Thanks for the help Peter, but what I really want is a customised blogskin, e.g. an anime-themed blogskin, not adaptations of default beta templates... heheh. T_T

    Thanks anyway. Please reply...


Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics