Tutorial 2 : Changing Blogspot Layout With Free Templates

Every website/blog has its own unique style as all blogs differ in terms of the source codings that are created or designed.
This tutorial will show you easy step by step instructions on how to change to a new layout.

What Are Templates?
Before we begin, here is a brief explanation on the term ‘template’.
A template is a tool source pre-designed by professionals which will determine how a specific website/blog looks and appears like with accordance to the design.

Why Do I Need A New Template For?
A good template will give the "look and feel" to your blog/website pages, which can impress your visitors and readers. It is similar to “renovation” of your house or “modifications” to your car by adding the extra built-in features respectively.
The idea of having a new template varies from one user to another. Some change their templates to allow for easier navigation for the visitors, while others do so to project their personalities. As the saying goes, first impression counts.

Will It Affect My Old Posts?
No. As long as you do not click on the DELETE YOUR BLOG button in your Settings, you should be on safe grounds. Modifications to the HTML will not affect your older posts. Your posts are saved in BLOGSPOT database. That is for the case of posts. What about widgets? Some pre-designed templates may automatically delete your widgets, so do be careful when changing the overall layout.

What Are Widgets?
Links, archives and miscellaneous scripts that are embedded from other sources in your blog are considered as widgets. The reason why some of your widgets may be deleted are the source codings that do not support them initially. But fret not because you can re-add your deleted widgets once your pre-templates have been installed.

Getting The Right Template
This is very important. Blogspot provides an intelligent layout feature with moving elements which has made blogging experience easier even without you having any knowledge of HTML or CSS. Therefore it is best to find pre-templates designs that offer the same feature for easier use.

Installing Your New Template

Sign in to your Blogspot Account! Once you have done so, you can proceed to carrying out the instructions below:

Step 1 : Switch to TEMPLATES on the navigation bar and hover down to EDIT HTML.

Step 2 : Back up your original template by downloading the FULL Template. (You may want to refer to our tutorial on how to back up your template here.)

Step 3 : Search for your suitable templates. Download them and save the templates of your choice to your desktop computer.
(See Annex A below for the recommended templates for your blog)

Step 4 : Browse for the template that you have saved earlier.

Step 5 : Once found, click on the Upload button.



Step 6 : Some of you might encounter this. Refer to the information about ‘What Are Widgets?’ above in the earlier part of the article. Click on CONFIRM AND SAVE. Once it is saved, you can view your blog and see the change in your layout.



You may now choose to rearrange your templates according to your preferences by navigating the to Template button on your dashboard.

That’s it. Have fun redesigning your blog.

ADDITIONAL INFORMATION

Search for the new blogger version or XML templates unless you are familiar with classic templates.

Changing File Extensions
Some files that are downloaded are in zip format. After unzipping, you may discover that the extension to the file where the codes are stored are in .txt, meaning that it is in text document or notepad format. You need to change the file extension name to .xml .

Filename
Double click on the text file: FILE -->SAVE AS. Under FILENAME, add .xml after the file name. A new file icon will appear.

The saved template should look something like this.



List Of Codes Shown On Browser
At times, the downloaded link will show you a list of codes. It will not work if you copy and paste to your HTML unless specified by the designer.

From your browser, click FILE --> SAVE AS (Ensure the file is save as .xml. If it is not in .xml format, see changing file extensions above). Once done, save it to your computer.

Then proceed to Installing Your New Template. Refer to earlier post above.

Annex A

(**Please read the instructions for your preferred templates by the designers on how to download the files to your computer.**)

RECOMMENDED TEMPLATE DESIGNS.

Free Blogger Skins

Gecko And Fly

Blog Crowds

Pyzam

Blogger Templates

Free Templates

Template Panic

Web Talks

(The recommended sites have been tested by us and proven to be workable)

Do inform us if there are any broken links or if there are any recommended sites that you would like to share with us.

We will keep the list updated once we receive those recommended links from you and also provide you with more of these workable templates sites.

Thank you.

Do stay in touch with us for more tips on blog designing.

Our First Tutorial On Blog Designing

Before we begin our tutorial proper, let us learn more about these common blog-designing terms:

HTML, also known as Hypertext Markup Language is a language tool for web designers to author source codes to create web pages.

CSS or Cascading Style Sheets is a language tool for web designers on how the HTML is designed or formatted.

JAVASCRIPTS are scripts that enable web designers and authors to design interactive items for the site.

Tags are structured sources that show information about your HTML. Just like the human structure, tags comprise the head, body and foot. This is how the structured layout of your HTML works.

Kick Start

Sign in to your Blogspot Account! Once you have done so, you can proceed to carrying out the instructions below:

STEP 1 : Click on the template found on the navigation tab bar given above.

STEP 2 : Hover down to EDIT HTML on the template.

STEP 3 : Download your FULL Template as a backup to your desktop before making any changes to the HTML

STEP 4 : If there is any problem in the editing or modifications of the HTML, you can always upload it again.

STEP 5 : The Widget Templates Tick Box:

Checked: The expanded mode will appear (ie full view of your source codes)
Not Checked: The collapse mode will appear (ie brief vew of your source codes)



Step 6 : This is another way to clear your editing.

Step 7 : Preview your edit to the codes. DO NOT SAVE yet. If there is any error, blogspot will inform you. See error example.

Step 8 : Once, finalized you can save your template.

Designing And Formatting

Adding CSS To Blogspot

Step 1 : Expand your Widget Templates Tick Box

Step 2 : Search for the following tag in your HTML
]]></b:skin> or search using CTRL+F and paste the code shown above.

Step 3 : Place your CSS design codes right BEFORE the tag.

Adding Java Scripts To Blogspot

Step 1 : Expand your Widget Templates Tick Box

Step 2 : Search for the following tag:
]]></b:skin> or search using CTRL+F and paste the code shown above.

Step 3 : Place your JAVASCRIPTS codes design right AFTER the tag.



With that, you have now got to know all the basics.

Create Your Own Fav Icon

Now, let us try displaying a favicon in your blog!

Readers, look carefully at our address bar. Can you see a small icon situated next to the URL? This is how it looks like:



For your information, what you had just seen is not any ordinary icon. It is called a favicon!

Now readers, take note of the following instructions in adding your favicon:

 Select your most wanted favicon, and once you have accomplished that, save the selected favicon as an ‘ico’ file.

 Upload the saved file into a web storage space that CAN accepts ‘ico’ extensions.

 To insert the favicon on your web/blog, search for the head tags :

<head> or </head>or search using CTRL+F and paste the code shown above.

 Once found, copy the code below and substitute "YOURBLOGURL" with the URL in your web space where the file is being saved, and place the above code IN BETWEEN THE HEAD TAGS of your blog.

<link href="'YOURBLOGURL'" rel="'shortcut"><link href="'YOURBLOGURL'" rel="'icon'/">

 After copying the code, preview it to make sure the favicon is displayed, (give it a while till your entire page finish with the loading) once everything is set, save your template.

 If it still does not appear, clear your explorer brower’s cookies if you are not sure read more about our review on FREE CC cleaner here.

Are the instructions clear? So what are you waiting for?
Get your address bars decorated with favicons now!
Stay in touch with us for more tips on blog designing.