Blogger template tutorial

Blogger template
A template is a set of HTML files which define the appearance and functionality of the blog. You can use the templates that are provide by Blogger, customize the provided template or write your own.

To access Blogger template, log into the Dashboard, select the blog, click TEMPLATE tab. You will see the template displayed in the edit template window. If you have already done some customization, it is a highly advisable to always backup your template. To backup the template, highlight ALL the text of the template, right-click and copy (or ctrl+C), paste into Notepad and save under a suitable title like dummies17april06. Saving a template has saved the woes of many a blogger.

The Blogger template has 3 main components – HTML (Hyper Text Markup Language), CSS (Cascading Stylesheet) and Blogger tags. HTML tags tell a web browser how to display the page. It is a good idea to have some knowledge of HTML and a good place to learn is the online W3schools. CSS control the style and layout of the webpage. You can also learn about CSS in W3schools. When you submit a post to Blogger, it is saved to their database. When you publish something, the Blogger tags tell Blogger publishing program which information to fetch from their database and put it on the webpage.

Here are some examples of HTML tags to give you an idea of what it is all about. The heading of this section was coded as


. HTML tags occur in pairs – opening tags like

and closing tags like

. If you look in the template you will see this block of codes:


are the opening and closing tags for an unordered list, while and define a line of the list. This block of codes was put in the Blogger tag so that you can conveniently edit it to suit your wishes. You can easily replace and Google News with an URL and description of your own. Similarly for…. and Edit-Me.

You may want to customize your blog by adding stuff like HTML, etc, to the template. For more information on this, go to Blogger template tutorial Part 2.

CSS (Cascading Style Sheet)
The cascading style sheet is placed at the beginning of Blogger’s template and surrounded by the tags and it will look like something like this:

/ and / surround things meant as comments (information). It is only meant for the person reading the template and is not taken into consideration by the browser.

body {

means that whatever is surrounded by { and } are properties of the body of the blog. For example, background:#fff; means that the background of the blog is white in color. You may change it by changing background:#fff; to, say, background:red;

To learn more about CSS, go to W3Schools.

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

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,

<$BloggerArchiveURL$> <$BloggerArchiveName$>

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 more on templates, go to Blogger template tutorial Part 2.

Leave a Comment

Your email address will not be published.