3-Column Template TAPSponsored Link

I received a couple of questions regarding the 3-column template for blogger beta that I use in TAP (The Aroengbinang Project), and have tried to assist a fellow blogger through YM, but unfortunately it didn't work well.

Hence, I've made a step by step tutorial, based on Hans' works, with a few changes to satisfy my needs. The credit shall go to Hans.

I have tested here using Minima template and it worked well.
Sit back, relax, and let's start.

1. On your dashboard, click Layout, Click Edit HTML
2. Backup your template:
   Click Download Full Template, save it at you hard disk, close download template.
   Please don't proceed without doing this step. If something went wrong, you still could upload the original template.
   
   
3. Click Alt+e+f, copy this: #header-wrapper, paste in the form, hit enter; or scroll down to find:
   #header-wrapper {
   width:660px;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   }
   
   Change the width to 890, and it will look like:
   #header-wrapper {
   width:890px;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   }
   
   
4. On the #header, one paragraph down, change it to:
   #header {
   margin: 0px;
   border: 1px solid $bordercolor;
   text-align: left;
   color:$pagetitlecolor;
   }
   
   
5. On the #header .description, three paragraph down, change it to:
   #header .description {
   margin:0 5px 5px;
   padding:0 20px 36px;
   max-width:890px;
   text-transform:uppercase;
   letter-spacing:.2em;
   line-height: 1.4em;
   font: $descriptionfont;
   color: $descriptioncolor;
   }
   
   
6. On the: #outer-wrapper, one paragraph down, change it to
   #outer-wrapper {
   width: 890px;
   margin:0 auto;
   padding:10px;
   text-align:left;
   font: $bodyfont;
   }
   
   
7. On the paragraph of: #sidebar-wrapper, replace the whole paragraph of:
   #sidebar-wrapper {
   width: 220px;
   float: right;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }
   
   with two paragraphs below :
   #middle-sidebar-wrapper {
   width: 220px;
   float: right;
   margin-left:20px;
   word-wrap: break-word;
   overflow: hidden;
   }
   
   #right-sidebar-wrapper {
   width: 220px;
   float: left;
   margin-left:20px;
   word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
   overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
   }
   
   
8. Press Alt+e+f, search for: <div id="sidebar-wrapper"> , you will find:
   <div id="sidebar-wrapper">
   <b:section class="sidebar" id="sidebar" preferred="yes">
   
   Replace the two lines with:
   <div id="middle-sidebar-wrapper">
   <b:section class="sidebar" id="middle-sidebar" preferred="yes">
   
   Below the paragraph, after: </div>, copy and paste:
   <div id="right-sidebar-wrapper">
   <b:section class="sidebar" id="right-sidebar" preferred="yes">
   </b:section>
   </div>
   
   
9. Press Alt+e+f, find: #footer, change the width and the text-alignment to become:
   #footer {
   width:790px;
   clear:both;
   margin:0 auto;
   padding-top:15px;
   line-height: 1em;
   text-transform:uppercase;
   letter-spacing:.1em;
   text-align: justify;
   }
   
   
10. Save Template
11. Click Template
12. Add Page Element as you wish.

I made the font smaller for footer by putting the text in between <span style="font-size:70%;"> and </span>

Now, I'm still looking for ways to make rounder column for the template, to make it looked nicer, and to find a nice background for outside the wrapper.

Sponsored Link

Sponsored Link

Sponsored Links

Penulis: Bambang Aroengbinang, seorang pejalan musiman dan penyuka sejarah. Penduduk Jakarta yang sedang tinggal di Cikarang Utara. Diperbarui: May 24, 2007.

Leave comments

Type it first, then click "Login ..." or "Posting".