Tutorial # 11 - Understand the HTML or XML Code of the Blogger Templates

All the templates or themes are based on HTML or XML Code which can be amended in order to make changes in the templates as per your requirements. Now the question arises how to amend it. Thus, first we have to make an understanding of the HTML or XML Coding so that we would at least be able to amend it a bit.

Every template has a different code because of different design and interface. If we have a basic understanding of HTML code, we will be able to amend all such templates to some extent. The templates available by default does not require to be amended because many of changes can be made in through "Layout" and "Template Designer" including background, fonts, widths, color, etc.

However the downloaded templates can't be amended in such ways, thus we have to go to HTML editing.

Step 1: Download a template from a website (e.g. btemplates.com)

Step 2: Select an appropriate design for your blog

Step 3: Download the template (.zip) file

Step 4: Unzip the file
After unzipping the downloaded file of the template, you will get the two important files namely:-

- Config.txt or Documentation.txt (or by some other name), and
- Template .XML file (MXfluity.XML in this case)

Their purposes have been explained in the picture below. The Config.txt file explains you how to amend the main components of the templates like menus, sub menus. This is the most easiest part of coding. You may add a new item in the menu bar by just copying the complete line of a menu item code starting from till in a relevant position. You just need to change the name and link included in the line.

Step 5: Upload the XML file of the template
(See Tutorial # 3 - Changing the Blog Template or Theme)

 Step 6: Go to Dashboard > Template, and Click on "Edit HTML"

Step 7: Now just have a glance on the coding of the blog template

You need to save the template in your computer before making any changes. Expand the code by clicking on all the triangles on the left-hand side (one has been marked below for your understanding).

Once you are gone through all the coding of the template, you must be able to comprehend some of the components of the code. With reference to the complete line, to some extent we are able to understand of which component in the interface it is talking about, like for example:-

- "px" refers to some margin, length, font size, gap, boundary, etc.

- "#363636", "#333", "#FFF", or "#8F8D8D" refers to a color in the HTML code. In order to identify the color, you may go to www.w3schools.com. This website also helps you in the choosing the color as it provides you the HTML code of each and every color.

- "float" helps to align or position a text or image to left, right or center.

In all the coding including the above three example, we can use the "Hit and Trial Method" to identify effect of any line, code or segment on the template. But make sure that the original template has been saved as back up arrangement.

However, here we can use another method which helps us in identifying the code line of each and every component in the interface.

Step 8: Go to the Home/Landing page of your blog and press Ctrl + Shift + I (or F12 in previous versions) in case of Google Chrome.
A new window known as Developer tools will be open as shown below. In the "Elements" tab you may find the HTML code of template.

The part of webpage will be highlighted when you place the cursor on the code line of the respective part. This makes it easier to identify the part which is represented by the code.

Step 9: Let's change the background of header from white to red

Step 10: Just check it out; and make such other changes using the preceding steps