Cara melebarkan kolom/elemen pada templates blog

Sebelum kita masuk ke pokok permasalahan, ada baiknya kita mengenal dulu bagian-bagian dari templates blogger, maka sebuah template blog akan mempunyai tiga elemen penting, yaitu :

• Kolom/Elemen Header
• Kolom/Elemen Outer
• Kolom/Elemen Footer

Untuk elemen Outer di bagi kembali menjadi :

• Elemen main, elemen main ini adalah elemen tempat kita menyimpan posting, jadi apabila kita memposting sebuah artikel maka akan masuk dan di tampilkan pada elemen ini

• Elemen Sidebar, elemen sidebar ini adalah merupakan elemen untuk menyimpan berbagai blog tools ataupun aksesori yang kita inginkan untuk mempercantik blog.

Outer-Wrapper adalah wadah untuk menyimpan main-wrapper serta sidebar-wrapper. Jadi jika kita ingin menambah kolom baru atau dengan kata lain sidebar baru, maka hal yang pertama wajib di lakukan adalah menambah nilai lebar dari Outer-wrapper itu sendiri

Nah,, sekarang bagaimana cara melebarkan kolom yang ada pada templates kita??

Ikuti langkah2 berikut ini, tapi dengan catatan jangan mencentang Expand Widget Template, karena akan muncul kode-kode yang tidak saya mengerti.

[Sebegai contoh] lihat gambar dibawah ini :

1. Langkah pertama cari kode seperti dibawah ini :

#header-wrapper {
width:950px;
}

Ganti 950px menjadi 1200px sehingga menjadi seperti bawah ini :

#header-wrapper {
width:1200px;
}

2. Cari lagi kode seperti di bawah ini :

#outer-wrapper {
width:950px;
}

Ganti 950px menjadi 1200px sehingga menjadi seperti bawah ini :  

#outer-wrapper {
width:1200px;

}

3. Cari lagi kode seperti dibawah ini :

#footer {
width:950px;
}

Ganti 950px menjadi 1200px dan scriptnya menjadi seperti dibawah ini :

#footer {
width:1200px;
}

Nah,, untuk wadah(Outer-Wrapper) nya istilahnya kita sudah memperlebar dari 950px menjadi 1200px.

Maka Langkah selanjutnya adalah melebarkan/menambah ukuran lebar kolom dari main-wrapper dan sidebar-wrapper nya agar sesuai dengan outer-wrapper/wadahnya.

untuk meperlebarkan main-wrapper (kolom utamanya yang biasanya berisi tentang postingan kita), dan juga lebar sidebarnya, maka kita tinggal cari kode seperti di bawah ini:

#main-wrapper {
width: 620px;
float: left;
}

#sidebar-wrapper {
width: 320px;
float: right;
}

Ganti ukuran lebarnya sesuai dengan lebar yang sobat inginkan, yang penting memenuhi lebar dari wadah/outer-wrapper nya. contoh :

#main-wrapper {
width: 840px;
float: left;
}

#sidebar-wrapper {
width: 350px;
float: right;
}

Artinya : 
840px + 350px+ 10px = 1200px

840px adalah lebar {main-wrapper}
350px adalah lebar{sidebar}
10px adalah lebar {untuk sela/margin sidebar}
1200px sesuai dengan{outer-wrapper atau wadah pada contoh di atas}

Dari keterangan di atas, maka akan menghasilkan seperti pada gambat di bawah ini :

Silahkan di pratinjau dulu sebelum menyimpan, jika sudah ok, maka simpan template sobat.
Nah, kini template sobat sudah berhasil di perlebar kolomnya, agar bisa lebih leluasa untuk mengisi konten2 yang bermanfaat.
Selamat mencoba, semoga sukses dan bermanfaat.




Sumber :
http://abdu-green.blogspot.com/2012/04/melebarkan-kolom-pada-templates-blog.html

Baca Artikel Terkait berikut ini: