Trik Membuat Kolom Blog Sama Tinggi

Saat anda memberi warna berbeda pada kolom blog apa yang anda temui? Tinggi kolom yang tidak sama?Misalnya anda memberi warna yang berbeda antara kolom untuk postingan dan kolom sidebar, pasti tinggi kedua kolom tidak sama tinggi. Hal ini dikarenakan tinggi kolom pada template blog akan mengikuti isi atau content dari kolom tersebut. Lalu bagaimana membuat kolom blog sama tinggi? Saya akan menjelaskan sedikit trik membuat kolom blog sama tinggi.

Untuk membuat kolom blog sama tinggi yang perlu kita utak atik adalah background dari elemen content-wrapper. Kali ini saya kembali menggunakan template minima bawaan dari blogger sebagai alat latihan. Template minima sendiri hanya mempunyai dua kolom, yaitu satu kolom untuk area posting-disebut main-wrapper dan satu area untuk sidebar-disebut sidebar-wrapper. Jika template anda mempunyai tiga kolom trik ini bisa juga anda terapkan disana. Yang perlu anda ketahui adalah struktur dari template blog anda.
Sekarang langsung saja kita mulai mengoprek template minima dan menuju ke kode-kode HTML nya. Pertama kita akan memberi warna berbeda untuk kedua kolom, cari kode berikut

#main-wrapper {
width: 410px;
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 */
}
#sidebar-wrapper {
width: 220px;
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 */
}

Kode-kode diatas adalah kode CSS untuk elemen main-wrapper dan sidebar-wrapper. Tambahkan properties background untuk kedua elemen tersebut, sehingga menjadi seperti ini

#main-wrapper {
width: 410px;
float: $startSide;
background: #BD70E1;
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 */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
background: # E4D67A;
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 */
}

Simpan perubahannya dan lihat hasilnya. Sekarang kedua kolom telah memiliki warna yang berbeda, tetapi bisa anda lihat ternyata tinggi kedua kolom tidak sama. Untuk membuat tinggi kedua kolom sama yang perlu anda lakukan adalah mengatur properties elemen yang membungkus elemen main-wrapper dan sidebar-wrapper. Didalam template minima elemen yang membungkus elemen main-wrapper dan sidebar-wrapper adalah elemen content-wrapper. Mengenai hal tersebut anda bisa mempelajarinya di struktur template blog.
Elemen content-wrapper sendiri didalam template minima tidak diatur dengan CSS. Untuk itu kita perlu menambahkan kode CSS untuk elemen content-wrapper. Untuk menambahkan kode CSS elemen content-wrapper cari kode berikut

#main-wrapper {

Tambahkan kode berikut tepat diatas kode tersebut

#content-wrapper{
width: 660px;
}

Sebelum mengatur properties background dari elemen content-wrapper kita memerlukan sebuah gambar yang harus kita buat terlebih dahulu dengan menggunakan program picture editor. Saya menggunakan adobe photoshop. Saya akan menjelaskan langkah-langkahnya.
Pertama kita perhatikan dulu lebar untuk elemen content-wrapper, main-wrapper dan sidebar-wrapper. kodenya seperti ini

#content-wrapper {
width: 660px;
#main-wrapper {
width: 410px;
#sidebar-wrapper {
width: 220px;

Lebar elemen content-wrapper adalah 660 pixel, main-wrapper 410 pixel dan sidebar-wrapper 220 pixel. Kita akan sedikit melakukan hitung-hitungan. Rumus untuk ketiga elemen tersebut adalah

Content-wrapper = main-wrapper + sidebar-wrapper
660pixel = 410 pixel + 220 pixel
660 pixel = 630 pixel + 30 pixel (selisih)

Perhatikan ada selisih sebesar 30 pixel, selisih sebesar ini adalah jarak antara kolom main-wrapper dan sidebar-wrapper (bisa anda lihat di tampilan blog anda).
Sekarang kita beralih ke program photoshop. Buatlah dokumen baru dengan lebar 660 pixel dan tinggi 20 pixel. Color mode pilih RGB color. Lebar 660 pixel adalah berdasarkan lebar elemen content-wrapper sedangkan untuk tinggi kita cukup membuatnya sebesar 20 pixel saja karena nantinya akan kita buat berulang di dalam pengaturan CSS-nya.


Buatlah sebuah layer baru. Lalu aktifkan rulers (ctrl+R). Tampilan rulers harus dalam pixel. Caranya klik kanan pada tampilan rulers dan pilih pixel. Buatlah sebuah garis bantu pada titik 410 pixel dan 440 pixel. Caranya klik pada rulers lalu drag ke titik 410 pixel, klik lagi ruler dan drag ke titik 440 pixel.


Aktifkan rectangular marquee tool (ketik M).


Pada layer baru seleksilah area di sebelah kiri garis bantu pertama dan beri warna sama dengan warna kolom main-wrapper. Caranya, di kode HTML template minima Copy kode warna dari CSS main-wrapper (BD70E1). Di photoshop klik set foreground color lalu paste kode warna ke box select foreground color.


Kemudian dengan menggunakan rectangular marque tool seleksilah area disebelah kanan garis bantu dan beri warna sama dengan warna kolom sidebar-wrapper. Cara sama dengan diatas. Sehingga menjadi seperti ini.


Jika sudah simpanlah gambar tersebut. Pilihlah save for web, pilih yang optimezed. Format bisa dalam gif atau jpeg. Beri nama file, misalnya content-wrapper background.
Langkah berikutnya adalah mengupload gambar tersebut ke sebuah image hosting. Misalnya photobucket atau imageshack. Untuk bisa mengupload gambar ke sebuah image hosting anda harus memiliki akun disana. Misalnya saja kita menggunakan photobucket.Bukalah www.photobucket.com. Jika anda belum memiliki akun silahkan mendaftar dulu, gratis kok. Jika sudah masuk ke akun photobucketanda, pilih My albums lalu klik albums and upload. Pilihlah gambar yang akan diupload dengan mengklik “choose files”. Pilih gambar yang sudah anda buat tadi. Jika sudah terupload arahkan mouse anda pada gambar tersebut kemudian akan muncul pop-up yang berisi link untuk gambar tersebut. Pilihlah direct link dan copy.
Sekarang beralih ke kode HTML template minima kita. Carilah kode CSS untuk elemen content-wrapper, kodenya telah kita buat tadi, yaitu

#content-wrapper{
Width: 660px;
}

Tambahkan properties background hingga kode CSSnya menjadi seperti ini

#content-wrapper{
width: 660px;
background: url(http://i610.photobucket.com/albums/tt188/tjahyonoegroho/content-wrapper-background.jpg)repeat-y top center;
}

Kode yang berwarna merah adalah direct link dari gambar yang telah kita buat tadi. Repeat-y berarti kita memerintahkan kepada browser agar gambar diulang ulang secara vertikal. Sedangkan top center adalah posisi gambar didalam elemen content-wrapper.
Sekarang simpan perubahan dan kita lihat hasilnya. Mudah mudahan sekarang kolom main dan sidebar sudah sama tinggi. Jika ada pertanyaan, sanggahan, masukan atau tambahan silahkan tulis aja kotak komentar. Mari kita diskusikan bersama, hehehehe, maklum saya juga masih belajar.

Related Articles by Categories