26 June 2010

How to Customize and Save Your Blogger template

DO YOU REALIZE THE TEMPLATE IS YOUR BLOG'S CLOTHS?

Yes, the template you apply is your blog's clothes and this article has been written to give steps on how you can customize and save it to your blog, so as to give your blog a beautiful, clean look. Read on below to learn how to customize it.

Blogger template customization

Steps To Customize Your Blog Template

In the old Blogger, log into the blogger dashboard, click the blog name and then click on the 'Template' tab. The Template Tab had four subtabs: 'Page Elements', 'Fonts and Colors', 'Edit HTML' and 'Pick New Template'. However, this has changed in the new Blogger.

In the new Blogger, it is pretty the same except for few but astounding changes. Still log into your blogger dashboard, click on blog name and then on 'Template' Tab, OR click the blog's 'Template' tab directly from your dashboard. Unlike in the old Blogger, the Template Tab has three subtabs: 'Customize', 'Edit HTML' and 'Wrench icon (i.e. Customize Mobile Template)'.

Important Points To Note

The Page Elements are all now under the 'Layout' tab. The Layout is accessible from Blogger dashboard, OR click on blog name and then on 'Layout' Tab. The PageElement section is used to arrange / rearrange the various Page elements or Widgets in your blog.

The 'Customize' (i.e for Template Designer) subtab is where you can customize your template in the new Blogger. Click on Customize to bring up the Template Designer page to customize your template.
WARNING:
ALWAYS PREVIEW YOUR CUSTOMIZATIONS ON THE TEMPLATE DESIGNER'S 'Expand Preview' WINDOW TO ENSURE THAT NEW CHANGES ARE WHAT YOU ACTUALLY WANT BEFORE SAVING THEM!!!

OR,
IF YOU PREFER THE MORE CUMBERSOME METHOD, SAVE YOUR TEMPLATE BEFORE PROCEEDING WITH ANY CUSTOMIZATIONS!!!

Saving Your Template

There are two ways to save your template in blogger:
  1. The first method is to click on 'Template' tab, then click on 'Backup/Restore'; and click 'Download Full Template' in the pop-up window that appears. Click on it and save the file with XML extension to your hard disk.
  2. The second method is to still click on 'Edit HTML' subtab under the Layout tab, then put a check in the box to 'Expand Widget Templates'. This expands the template in the text box below. Now right click anywhere within that text box and choose 'Select All'. Then right click within the blue selected area and choose 'Copy'.

    Open Notepad, right click within it and choose 'Paste'. This pastes your entire template in Notepad and now save it as a text file. To upload it again unto your blog, see below.

Customizing and Uploading templates to Blogger

There are two ways to customize already existing or upload new templates to your blog:
  1. The first and easiest method is using Template Designer: Click 'Customize' subtab under the Template tab, then select the template you want from the numerous that Blogger has on offer (Simple, Picture Window, Awesome, etc). Click on 'Background' and effect any changes you want. Do same to 'Adjust Widths'; 'Layouts' and 'Advanced'. Then click 'APPLY TO BLOG' to save changes. And you are done!

    Warning: Always Preview Your Customizations On The Template Designer's 'EXPAND PREVIEW' Window To Ensure That New Changes Are What You Actually Want Before Saving Them!

  2. The second method becomes applicable if you want to use a template previously saved to your hard disk or one that is not on the Blogger Template Designer templates. To do this: click 'Backup/Restore' subtab under Template tab, then click Browse button under the pop-up window that shows up. Navigate to your desired XML template file on your hard disk, select it and click 'Open'. The path to the file is loaded and then click on 'Upload'. The template is uploaded and saved immediately and you can view your blog in its new clothes.

    Important: Old Blogger Used XML Templates Which You Can Still Upload And Use On Blogger Now, BUT You Cannot Customize These Templates With The New Template Designer. You Must Customize Such Templates Manually Via The 'EDIT HTML' Subtab
Another method is to copy and paste the entire template code into the 'Edit Template' box on the 'Edit HTML' page and click Save.

After dressing your blog in its new clothes always check it in browsers to see how it looks. About 80-90% viewers use Internet Explorer and about 10-15% use Firefox. Others use Opera and safari. Try and check it in all the browsers you have.

Finally, check also to see how it looks at different resolutions. To check how it looks at 800 by 600px, type the following in your browser address box (after loading your blog):

javascript:top.resizeTo(800,600)

and press ENTER.

It will resize window to the window to that resolution. About 15-20% viewers use that resolution and should be able to view your site without distortion. To check at other resolutions enter the corresponding figures in the parenthesis above and do likewise.

TO EDIT XML FILES YOU CAN USE FOLLOWING PROGRAMS:
  • XML Notepad 2006
  • Microsoft XML Notepad
  • Stylus Studio XML Pro
  • XML Fox XML&XSD Editor
Well done. And ...keep on enjoying!

No comments:

Post a Comment