Thursday, May 24, 2007

3-Column Template TAP

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.

19 comments:

  1. Useful helps bang ... thanks

    ReplyDelete
  2. mm... i'm an older blogger user...stay with the classic =)

    btw, thanks for the information... i keep it for my next blog..i little bit serrious blog =)

    ReplyDelete
  3. teach me..teach me..! ^_^

    hehehe

    ReplyDelete
  4. wah bisa membantu nih..

    saya juga biasa bikin 3 kolom tapi yg HTML atau classic (http://pernakpernikblog.blogspot.com), bukan yg new...

    ReplyDelete
  5. aroengbinang4:32 AM

    @wayan: makacih
    @escoret: :D
    @beni suryadi: diapgred bung :), ho'oh agak serius ya...
    @MnX: iya, ntar diajarin :D
    @Fany: nah yg mo 3-kolom buat yg klasik, ada di tempatnya jeng Fany

    ReplyDelete
  6. you put the indonesian movies promo on your blog..
    do you like the indonesian movie?
    i mean, as an indonesian, i try to enjoy while watching them. but somehow i just thinking that maybe the director or the actress never watch it "as a spectator" before the launch their movie to the theater...
    Hantu Jeruk Purut?, oh'cmon..it seem like a comedy movie than hovor movie for me...
    Naga Bonar 2? check this comment, i am on their side.
    how about u, Mr? =)

    just asking =D

    ReplyDelete
  7. it's very nice to have 3 column template, but i'm still not familiar with all of that process, so maybe i need to learn first. anyway thank so much, at least i know about that.

    ReplyDelete
  8. I switched to the 3-column template when the first article was posted on TAP. It was pretty successful yet challenging.

    The tricky parts for me were setting the right column width and making sure the texts between columns were not too close to each other.

    ReplyDelete
  9. Ganti2 trus yaaa...

    Tapi masih tetap hitam... :D

    ReplyDelete
  10. thanks for sharing information mas. i have tried for my new blog. But still unsatisfy and the data was lost. so for the time being, as Tukul said, i prefer to use old template (2 two column).

    ReplyDelete
  11. informasinya oke mas :)

    ReplyDelete
  12. complete ya pelajarannya disini mas

    ReplyDelete
  13. Pak,kenapa yah bagian tengah blog saya kosong? Mohon dibantu..Terima kasih..

    ReplyDelete
  14. join the 3 column discussion:-) I've been tried utak-atik 3 column for classic template based on isnaini[dot]com... Seems works well in my blog, check it out http://conradsharry.blogspot.com, just need ur opinion.

    NB:stand behind beni suryadi about indonesian movies:-)

    ReplyDelete
  15. Mas, gimana agar tampilan tulisan tidak sepenuhnya... tapi bisa muncul Read more... *maklum, masih pemula mas, lagi pengen belajar ngotak ngatik blo :P* thanks tuk infonya

    ReplyDelete
  16. Anonymous9:53 PM

    That is wonderful. thnx very much. I will try that in main Gates Of Egypt

    ReplyDelete
  17. blogs dengan 3 column kayaknya bagus tuh, karena saya masih menggunakan yang 2 column
    thanks atas informasinya keep posting

    ReplyDelete
  18. Thank you for your valuable tips.
    I am still using a 2 rows classic template, and I want to expand to 3 rows.
    Have a nice weekend.

    ReplyDelete