Changing To Blogger Template Designer For Three Columns And Tabs

I converted my Blogger template to 3 columns in 12/2008, using instructions from somewhere on the web.  This month I decided I wanted TABS.  Yesterday I found the easiest way for me to get the tabs, without the hassle of editing on the actual HTML template, was to convert to the Blogger Template Designer, in effect as of 03/2010.  You will see what I mean if you open the HTML Tab and take a look!

I created a Page layout (the Page will give you one Tab plus your Home Tab) first by clicking on Posting, Pages, and New Page.  I created a listing page - Tutorials - and then listed my tutorials.

I found it was helpful to remember these features about Template Designer when using it:

• My blog was always visible below the area where I was working so I could see what it would look like before I saved it.
• I could even view it in a separate window or tab before I saved.
• I should always save it when I liked what I saw before going to another step.

There are some other neat features too, as you will see:

STEP 1. Saved CURRENT TEMPLATE (just in case I screwed up) by:

• Going to the EDIT HTML tab
• Click on the DOWNLOAD FULL TEMPLATE (Upper Right Hand Corner)
• A pop up will ask whether to Open With or Save - Click on Open With and write down the location as you see it at the top of the window, so you can erase it when you are done.

STEP 2. Click on TEMPLATE DESIGNER TAB to the right:

• You will be in TEMPLATES TAB area on the left. 
• On the RIGHT I picked SIMPLE. 
• Click on APPLY TO BLOG (Bright Orange in upper right-hand corner) The Orange will turn Grey.
• Do this each time you make a change. You can check out what you do by looking at your blog below.

Step 3.  Next I went to the BACKGROUND TAB:

• Since I have a White BG in the Simple format, I don't need to pick a background. It says not applicable. 

Step 4. Click on the LAYOUT TAB:

• The first selection choice to your right is BODY LAYOUT. The second row first choice is 3 COLUMN (with the TEXT in the middle). Just what I wanted. Click on APPLY TO BLOG (Bright Orange in upper right-hand corner) It will turn Grey.
• Next you choose your FOOTER LAYOUT. I chose the first one for now. You can always change any of these BTW. 
• Click on APPLY TO BLOG (Bright Orange in upper right-hand corner) It will turn Grey. 

STEP 5. CLICK ON ADJUST WIDTHS (This is for Your Header and Sidebars):

• The top"Bar" allows you to pick the ENTIRE BLOG WIDTH. 
• I chose 1000 px. 3 columns takes a lot of space when you consider widget widths, etc. 
• Click on APPLY TO BLOG (Bright Orange in upper right-hand corner) It will turn Grey. 
• Next you are selecting the LEFT and RIGHT sidebars (that hold your widgets, etc.) I chose 250px for each side-bar columns.
• Click on APPLY TO BLOG (Bright Orange in upper right-hand corner) It will turn Grey. 

STEP 6. HEADER (BANNER):

• My Header was totally over to the LEFT HAND MARGIN and nothing worked to get it in the middle (resizing, etc.) If you have this problem here is one way to solve it. 
• This is the code that lets you ADJUST HEADER TO CENTER 
• Left Click and drag cursor over code, right click and select Copy in the drop down:

.header-inner .widget {
margin-left: 180px;
margin-right: 30px;}

• This is where you paste it: 
• click on ADVANCED. 
• In the next column go down to and click on ADD CSS. 
• Just below where it says "Add CSS", in the white area, RIGHT click and Paste. 
• Click on APPLY TO BLOG (Bright Orange in upper right-hand corner) It will turn Grey. 
• Look below to see where your Header is located. 
• Adjust the 180px you see UP or DOWN until your header is centered. It can even be a -180, etc., if that works. One person had used 240. It all depends on the width of your Header. Be sure to follow the code format though or it won't work at all. 
• You can see what happens each time by looking at your blog below. When you have it right, click on APPLY TO BLOG (Bright Orange in upper right-hand corner) It will turn Grey.

STEP 7. Your Widgets In Your Sidebars:

• You may notice Blogger has moved your widgets, etc. in your sidebars around.
• Just go to the Design Tab, you should also be in Page Elements 
• Move your widgets, etc. in your side-bars where you want them. As I moved mine I clicked on the Orange Save button up to the right near the top.

Step 8.  Now About Those TABS:

• Go to TABS TEXT and pick out your text.  (You will notice that each area you are working on will show bright orange dots so you can see what your are changing.) 
• Go to TABS BACKGROUND to pick that out.  For each one when I had what I wanted I clicked on the Orange Save button up to the right near the top

When you want, you can go back to the Template Designer and finish choosing your FONTS and COLORS for all of the areas for your blog. I'm tired right now, aren't you?  LOL  It's kind of fun if you just do it one step at a time. If you have questions, please email me. I will try to help. Thanks for stopping by to look and share!

 Shirley