Merubah lebar kolom halaman blog

Tujuan melebarkan kolom adalah untuk menampilkan layout pada blog se cantik mungkin, apalagi kalau gedget/widget yang dipasang rada memakan tempat dan kelihatan terpotong karena kolom sidebar tidak muat, jadi biar kolom utama (main page) dan sidebar kolom bisa serasi harus dirubah lebar kolomnya, tapi ingat,saya sarankan hanya untuk yang memakai Modzilla Firefox, soalnya pas saya buka di IE, eh lebar kolom tidak sama, jadi melorot kebawah tampilan sidebar3 di blog ku, ternyata masalahnya adalah di IE lebar kolom menyesuaikan dengan lebar gedget, jadi gedget perlu dikecilkan juga lebarnya supaya tidak melorot ke bawah.

Cara menambah lebar kolom seperti biasa kita ke tata letak dan edit HTML, tapi ingat jangan di contreng ya Expand Template Widget nya. Dan jangan lupa save dulu template anda, spt biasa takut salah kan bisa balik lagi ke template semula.

Di edit HTML kalau di tempat saya seperti ini tampilannya :
Cari kode html spt ini :

#outer-wrapper { adalah lebar (100%) blog anda. Ini sudah default, ibaratnya selebar layar komputer anda, jangan di rubah.

#outer-wrapper {
margin: 0 auto; /* to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: 15px;
margin-bottom: 30px;
position: relative;
width: 100%;
text-align: center;
}

Lalu ada #blog-wrapper { : lebar blog yang akan memuat lebar main-page (halaman postingan) dan sidebar (lebar=horisontal) lihat width nya :970 px sedangkan width outer diatas:100%

#blog-wrapper {
margin: 0 auto; /* to make the template lay in the screen center */
padding: 6px 8px 6px 6px;
margin-top: 15px;
margin-bottom: 10px;
text-align: center;
position: relative;
width: 970px;
background: $blogframeColor;
border: 1px solid $blogBorderColor;
}

#main-wrapper { (halaman utama postingan) : Jika ingin dikurangi bisa ganti yang warna hijau

#main-wrapper {
float: left;
position: relative;
width: 574px;
margin: 6px 0px 6px 4px;
padding: 0px 0px 0px 0px;
text-align: left;
background: $postbgColor;
border: 1px solid $postBorderColor;
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 */
}

Lalu ada Side wrapper, di tempat aryo kode htmlnya spt dibawah ini :




















/* ----- SIDEBAR ----- */
#side-wrapper {
width: 375px;
float: right;
margin: 0px 0px 0px 0px;
padding: 6px 0px 0px 0px;
background: $mainsidebarbgColor;
border: 1px solid $mainbordersidebarbgColor;
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: 375px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
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 */
}

#sidebar1 {
width: 348px;
margin: 0px 6px 6px 0px;
padding: 6px 10px 0px 10px;
color: $sidebar1TextColor;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

dst.....


Side-wrapper adalah total lebar ruang untuk bar samping (sidebar) halaman posting (lihat halaman blog anda), ganti lebar total bar samping pada warna hijau.

Sidebar-wrapper adalah total lebar seluruh jumlah sidebar menyamping (bisa 2 atau 3 sidebar, tergantung template anda 2 atau 3 kolom)

Sidebar1 adalah ya sidebar 1, apalagi yg perlu dijelasin,

Sidebar2

dst..

Rubah pada widh masing-masing bar (warna hijau), cuma rubah angka kok, tapi yg proposional ya, misal side-wrapper = 375px ya sidebar wrapper maximal 375px. Lalu sidebar1 (atas) spt punyaku kan sendirian, ya jangan smpi lebih dari 375, lalu sidebar2 dan 3 kan paroan (bagi 2), ya tinggal dibagi 2 saja dari 375. Tp sebaiknya jangan ngepas lebar maksimal,ya sisain dikitlah, nah terus disimpan, coba deh dilihat, klo masih kutang eh kurang puas ya ganti lagi angkanya.

Oh ya Padding itu adalah jarak kosong antar halaman/sidebar, utak atik saja kalau mau paddingnya, yg penting sudah disimpan template yang lama jangan takut untuk trial and error

Nah kalu kacau balau lebarnya dan nyerah, pakai format template semula lagi saja yang sebelumnya disimpan dan lupakan melebarkan kolom . Heheheh..

Posted by Aryo

Related Posts by Categories