Understanding Blogger Templates (or Themes) - Part I

As a blogger, I am more interested in putting my content on the blog rather than playing around and many a times messing up with the code of the template that I am using. But I am not happy with the Template. How would it have been if I could just change the Image on the header or add another sidebar? Sounds familiar?

Many of us, bloggers, are not having much technical knowledge and so have to do with the templates provided free for use with Blogspot even though they do not like the template. Those who are a bit technical, do a Google search and find people or places where they can get the custom templates for use. Even if you get a template for use, you are unsure of how to use it for the best results.

So I thought to dissect the basic structure of the blogspot's templates and give you some tips and leads that you can use to learn and experiment on your own.

Pre Requisites -

Before we start I would recommend you to 

I. Take a Backup of Your Current Template
To start with, take a back up of your current template before starting to work on the HTML section. This is essential just in case you mess up the template that you are currently using. It will save time, in case anything goes wrong.

II. Have Some Knowledge of HTML and CSS
Yes, you will need to have some knowledge of CSS and HTML before you delve into modifying the code. Trust me - HTML and CSS are easy to learn and remember you need not know all of those to work with templates. I will point out the ones and also try explaining a few as we go along.

How do I take a backup of my template?

Taking a backup of your working template is essential. This needs to be done just in case you end up messing up the template (to be honest, I did  mess up many a times, at the start) that you have been using with all the gadgets and other things. You would never like your visitors to get shocked.

Log in to the backend of the blogspot and go to Layout and Click on Edit HTML. This will display the place where you edit your template. This page has the following different sections -

i. Back up / Restore
This section is to be used for downloading the current template as it appears in the edit template section. You will find a link with a caption - Download Full Template. Clicking on this link will display your operating systems Save As Dialog box and you can specify the location where you want to save your template file.

Below this are the Browse and Upload buttons. These can be used to upload the saved template from your hard disk to blogspot. You can use this in case you have done a download of the template or have a new template as an XML file. Click on the Browse Button. This will display your Operating Systems Open Dialog Box and you will select the Template file that you want to upload. Once done, click on the Upload Button to get the template on your blog.

ii. Edit Template
This is the section where we would be doing the editing of the template. Below the edit box are three buttons

Clear Edits - Click this button in case you do not want to save the changes that you have made into the template and want to revert back to the last saved stage.

Preview - Click this button to have a preview of how the template looks like after the changes are made. Note that the changes will not be saved and applied on your blog till you click on Save Template button. So Preview is just a method to look into the things before committing the changes. Clicking Preview will open a new window or tab and display you the page as it would look like if the changes are saved.

Save Template - Click this button to finally apply the changes to the template. Note that clicking this button has immediate effect and it is visible on your blog. So be sure before saving the template.

On Errors that I commit during the changes

In case you commit any error during writing the code, Blogspot will simply display the error message which can be seen at the top. The description of the error is just an indication of what has goes wrong. It will not display you the location where you have committed the error. You will have to search for the location yourself and correct it on your own.

Doing it the Right Way

After you have taken the backup of the template, the steps / procedure we will be using is -
1. Make the modifications in the Editor
2. Click on Preview - if you have errors, this will not be generated and you would be displayed the error messages. If your changes are acceptable, the preview will be generated in a new window or tab, depending on the browser you are using
3. If the changes are okay with you, click on save - This will make the changes permanent and visible on your blog from now on.
4. Continue with editing if needed
Here is how a normal, unmodified blog at blogspot looks like (I have used the Rounded Corners Theme. You will have a different look just in case you have a different theme)-

Watch out for the next post on modifying the templates and themes.

Good Luck.


Post a Comment

Spread the Word