Template Minima Tiga Kolom

Pada artikel kali ini, akan mencoba berbagi tutorial mengenai cara membuat blog sobat dapurblogger 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 sobat dapurblogger sudah membuat kolom ketiga untuk template minima, maka akan lebih mudah bagi sobat dapurblogger untuk merubah-rubah besar atau kecilnya font, warna dan sebagainya.

Ok berikut langkah-langkah yang dapat sobat dapurblogger lakukan:

1) Pertama-tama pastikan sobat dapurblogger memilih minima sebagai template sobat dapurblogger(tapi jangan pilih minima stretch) dan jangan lupa untuk mem-BACKUP blog sobat dapurblogger untuk berjaga-jaga jika nanti sobat dapurblogger 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 sobat dapurblogger buat menjadi unik) float: left (kode ini akan membuat sidebar ketiga yang akan sobat dapurbloggerbuat 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:
<div id='main-wrapper'>

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

<div id='left-sidebar-wrapper'> <b:section class='sidebar' id='left-sidebar' preferred='yes'/> </div>


6) Coba preview blog sobat dapurblogger,sobat dapurblogger 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) sobat dapurbloggerjuga 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, sobat dapurblogger bisa menyimpan template baru sobat dapurblogger (Klik Save). Jika anda preview kembali, anda akan melihat sidebar ketiga sobat dapurblogger akan kosong, hal ini dikarenakan tidak adanya widget yang di pasang disana.

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


10) Kita belum selesai sampai di sini, jika sobat dapurblogger menambahkan widget pada sidebar di sebelah kiri sobat dapurblogger 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 sobat dapurblogger rubah nilainya seperti di atas.

11) Selesai, sobat dapurblogger memiliki blog dengan 3 kolom/sidebar sekarang



Selamat berkreasi dengan bLog sobat dapurblogger.


Semoga Bermanfaat