Membuat Blog Dengan 3 Kolom

Pada artikel saya kali ini, saya akan mencoba memberikan tutorial mengenai cara membuat blog anda menjadi tiga kolom, kita asumsikan kita menggunakan template minima sebagai template yang ingin kita rubah.

Template minima adalah template paling mudah untuk di ubah-ubah.
Bentuk dasarnya memiliki 2 kolom dan memiliki beberapa parameter seperti margin, padding dan sejenisnya. Jika anda sudah membuat kolom ketiga untuk template minima, maka akan lebih mudah bagi anda untuk merubah-rubah besar atau kecilnya font, warna dan sebagainya.

Ok 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; 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) Copy code di atas, kemudian paste-kan tepat di bawah kode tersebut (jadi ada 2 kode yang sama). Tapi ganti bagian yang saya beri merah dengan kode di bawah:

#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; 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>

#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) Selanjutnya, temukan kode HTML berikut:


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 880 px

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

#header-wrapper { width:880px; 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 kode berikut pada HTML blog kita:

#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 */ }

Kode yang saya beri tanda warna merah adalah yang harus anda rubah nilainya seperti di atas.

11) Selesai, anda memiliki blog dengan 3 kolom/sidebar seklarang