Merubah Template Menjadi 3 Kolom
04 Desember 2009

Ketika kita pertama kali belajar ngeblog di Blogger,  maka kita akan disuruh memilih template.  Semua template tersebut hanya terdiri dari 2 kolom yakni kolom postingan dan kolom sidebar.

 Kali ini Saya akan memberikan postingan cara membuat template menjadi 3 kolom dengan cara menambahkan 1 buah sidebar lagi.  Jadi ada 2 buah sidebar di sebelah kiri dan kanan.  Sebagai bahan percobaan,  template yang akan dirubah adalah template bawaan Minima 2 kolom.

Langkah-langkahnya adalah sebagai berikut :
  1. Setelah login,   pilih Tata Letak di Dasbor
  2. Pilih Edit HTML
  3. Cari kode HTML di bawah ini:
    #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 */ }/span>

  4. Tambahkan kode HTML di bawah ini setelah kode di atas
    #left-sidebar-wrapper { width: 220px; float: left; 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 */ }/span>

  5. Lalu cari kode di bawah ini
    <div id='main-wrapper'>

  6. Tambahkan kode di bawah ini sebelum kode di atas
    <div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>

  7. Dan cari kode di bawah ini
    #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }
    dan juga cari kode :
    #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }
     Ganti angka 660 menjadi 880,  atau menurut selera Anda.

  8. Cari juga kode di bawah
    #main-wrapper { width: 410px; float: left; 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 */ }

  9. Tambahkan margin-left: 20px;   sehingga kodenya menjadi
    #main-wrapper { width: 410px; 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 */ }

  10. Lalu simpan dan lihat hasilnya

Terma kasih kepada Alit Trisatya atas informasinya.

Label:

0 komentar:

Poskan Komentar

Langganan: Poskan Komentar (Atom)