2007-10-24

In terms of adjustability, there are actually two basic types of web layouts. The first type is the fixed layout. Most blogsites have this type of layout. While the second type of layout is the fluid layout. In both types of layouts, there are corresponding advantages and disadvantages. The specific type of layout can be determined or identified by the behavior of the texts and elements of a particular web page. If you horizontally adjust the size of the web browser, the texts and page elements may or may not shift their respective positions. If the texts and elements do not change their respective positions, the layout of that particular page you are viewing is fixed. Conversely, if the texts and elements of the page shift positions to fit the size of the window browser, the particular page that you are viewing has a fluid layout.

First, we will change the standard two-column layout of your Blogger blogsite template. It is advisable that you first switch to minima template. This is the easiest Blogger template to edit.

NOTE: If you find it hard to directly edit the HTML template of your blog, you can use Notepad or Word to do the editing. Copy-paste the entire template onto a separate Notepad or Word document. Simply use the CTRL+F command to find the specific sections that are enumerated here. After you have done all the editing, you can again copy-paste the edited template codes onto the template editor box of your blogsite.

I. Change to Three-Column Layout:

Step1: Backup your template by copy-pasting the template codes onto Notepad and saving the file. Make sure that you checked the "expand widget" box.

Step 6.Change outer-wrapper and header-wrapper width. In your CSS-style sheet look for the #header-wrapper and #outer-wrapper definitions, and change the width definitions from 660 to 860.

Step7:Add a page element. Save the template and go to the Page Elements Tab. Now, you can finally add a page element to your left sidebar. Save the template and view your blog. The Page Elements Tab should look like the illustration shown below.

NOTE: Always save your template every time you make changes.

The layout that you have just created is a fixed layout. You can change this layout into fluid layout by adjusting the wrapper elements.

Step2: Change the width definitions from pixels (px) into percentage (%). An ideal percentage proportion would be: 100% for the header and outer wrappers; 60% for the main wrapper; and 20% for both the sidebar wrappers. You can experiment on this to see the best result that you prefer.