KOEMAT: MENGUBAH TEMPLATE BLOG MENJADI 3 KOLOM

Dulu saya sering bingug untuk merubah tampilan blog agar menjadi 3 kolom, banyak cara saya coba tapi hasilnya tidak memuaskan. tapi akhirnya saya menemukan cara itu sehingga tampilan blog bisa sesuai keinginan.

berikut langkah-langkah yang dapat anda lakukan:

1) Pertama-tama pastikan anda memilih minima sebagai template anda (tapi jangan pilih minima stretch) dan jangan lupa untuk mem-BACKUP blog anda untuk berjaga-jaga jika nanti anda melakukan kesalahan.

2) Kemudian klik Template>Edit HTML

3) Temukan kode HTML berikut (Gunakan Ctrl+F untuk memudahkan pencarian):

#sidebar-wrapper {
width: 220px;
padding-left:10px;
float: $endSide;
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 */
}

4) Copy code di atas, kemudian paste-kan tepat di bawah kode tersebut (jadi ada 2 kode yang sama)dan ganti #sidebar-wrapper menjadi #left-sidebar-wrapper
(Kode ini dimaksudkan agar CSS yang anda buat menjadi unik) float: left (kode ini akan membuat sidebar ketiga yang akan anda buat bergeser ke kiri)

Jadi akan terlihat seperti ini:

#sidebar-wrapper {
width: 220px;
padding-left:10px;
float: $endSide;
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 */
}

#left-sidebar-wrapper {
width: 220px;
padding-left:10px;
float: $startSide;
word-wrap: break-word;
/* fix for long text text breaking sidebar float in IE */
overflow: hidden;
/* fix for long non-text content breaking IE sidebar float
*/

5) Selanjutnya, temukan kode HTML berikut:

"< div id='main-wrapper'>
< b:section class='main' id='main' showaddelement='no' >
< b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/ >
< /b:section >
"

Lalu paste-kan kode di bawah ini tepat sebelum kode di atas:

"

"

6) Coba preview blog anda, anda akan melihat kolom ketiga akan berada di bawah main section, tapi tenang hal ini bukanlah sebuah kesalahan melainkan ini dikarenakan bagian “Outer Wrapper” belum kita rubah nilainya, jadi hanya cukup untuk dua kolom saja. Untuk itu kita harus merubah nilai outer wrapper dengan cara sebagai berikut:

Temukan Kode HTML ini:

/* Outer-Wrapper ----------------------------------------------- */ #outer-wrapper { width: 660px; margin:0 auto; padding:10px; text-align:left; font: $bodyfont; }

Kita harus merubah lebar dari wrapper, makan kita harus mengganti angka 660 px menjadi 950 px atau disesuaikan dengan layout

7) Anda juga harus mengganti lebar dari header-wrapper ke angka 950 px, lihat kode di bawah:

#header-wrapper { width:950px; margin:0 auto 10px; border:1px solid $bordercolor; }

8) Sampai langkah ini, anda bisa menyimpan template baru anda (Klik Save). Jika anda preview kembali, anda akan melihat sidebar ketiga anda akan kosong, hal ini dikarenakan tidak adanya widget yang di pasang disana.

9) Tambahkan widget kesukaan anda pada sidebar/kolom baru anda dengan cara memilih Template>Page elements>Add widget.

10) Kita belum selesai sampai di sini, jika anda menambahkan widget pada sidebar di sebelah kiri anda akan melihat bahwa widget tersebut akan melebar sampai menembus main body (tempat artikel/tulisan kita berada). Untuk mengatasinya kita cari #main-wrapper dan rubah seperti dibawah ini

#main-wrapper {
width: 420px;
padding-left:30px;
float: $startSide;
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 */
}

Dan selesai, kita simpan setelan dan lihat blog, jika belum puas (semoga tidak cepat puas) lakukan perubahan2 yang diperlukan.