1 Cara Mudah Merubah Lebar Kolom Template

PT - Cara Mudah Merubah Lebar Kolom Template - Template yang akan kita pilih banyak model dan warnanya. Pencipta template membuat berbagai vareasi tentunya untuk memudahkan pengguna. Akan tetapi kita sebagai pemakai masih kurang puas dengan jenis-jenis template yang tersedia. Untung saja template-template tersebut bisa kita rubah sesuai dengan yang kita inginkan. Banyak hal yang dapat kita lakukan untuk merubah tampilan template. Salah satu yang bisa kita lakukan merubah lebar kolom suatu template.

Sebelum merubah lebar kolom suatu template, kita dapat mengenalinya melalui style sheet CSS nya. Akan tetapi antara satu template dengan template yang lainnya, akan terdapat suatu perbedaan. Hal ini tergantung kepada si pembuat template. Sebagai contoh untuk bagian header, di template blogger di dalam style sheet CSS nya di namakan header, tetapi untuk template-template hasil designer bisa dinamakan Banner ataupun nama-nama yang lainnya. Nama yang dipakai tidak berpengaruh pada hasil akhir tampilan suatu template, akan tetapi pemberian nama-nama dalam setiap bagian tersebut bertujuan untuk memudahkan peng-edit-an bagi pemakai.
Sebagai contoh saja, letak dari kode-kode untuk merubah lebar kolom template adalah sebagai berikut:

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

Keterangan:
Ini artinya header-wrapper mempunyai lebar sebesar 800px dan mempunyai border ( border adalah bingkai ) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna


#outer-wrapper {
width: 800px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Keterangan:
Ini artinya outer-wrapper mempunyai lebar sebesar 800px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna.

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
Keterangan: Ini artinya kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri.

#sidebar-wrapper {
width: 120px;
float: right;
}
Keterangan: Ini artinya kolom sidebar-wrapper mempunyai lebar sebesar 120 pixel dan di tempatkan sebelah kanan layar.

Yang perlu dirubah saat kita ingin memperlebar/mempersempit adalah merubah angka-angka pada tulisan yang berwarna merah. Semakin tinggi angka maka hasil yang didapatkan, kolom akan semakin lebar. Selamat mencoba dan pasti dengan kesungguhan panjenengan akan berhasil.

Komentar →