Blogger: Editing the HTML code of a Blogger Beta Template

In this post we will be checking out How to Edit the HTML code of template of a Blogger BETA.

Once you login into blogger.com by default you will be landing into "Dashboard" which shows the list of blogs that have been created by you.

Since we are editing the layout of the blog we have to click the "Layout" link to check the layout of the blog. Then you will be seeing a page that has a look similar to one shown below.
Now you can see three tabs namely Posting, Settings, Layout. Depending upon your template you will be having different options under Layout tab and I got Page Elements, Fonts & colors, Edit HTML, Pick New Template.

If you have to pick a new predefined template from google you have to click the option "Pick New Template". As I decided to show how to edit the HTML of the existing template I will be clicking "Edit HTML" option.Then you will be seeing a view similar to as shown below.
Before you modify the HTML of the BLOGGER template remember that you have to backup the existing template code so that even if any problem occurs because of modification of HTML code we can revert back to previously working HTML code. Click the "Download Full Template" link to backup the existing template code. The backup is saved as a .xml file. If you have to revert back to previously existing code which is saved in your harddisk just upload it by clicking the upload button.

By default "Expand Widget Templates" is not checked. Before we modify the HTML code we have to check it so that the code related to each and every widget that is present in our blog is shown up.
Once modifying the code present in the HTML editor we have to save the template or preview it using the appropriate button shown in above figure. Even if anything goes wrong we can revert back to the previous code as we already performed the backup of our previous code.