MENGUBAH LEBAR SIDEBAR

ada postingan sebelumnya kita membahas cara menambah sidebar. Postingan kali ini akan memaparkan cara-cara untuk mengubah kolom pada templat (header wrapper, outer wrapper, main wrapper, sidebar wrapper dan sidebar baru wrapper)
Caranya tidak sulit, anda hanya tinggal mengganti angka-angka pada kolom temmplate yang ingin diubah lebarnya.
Kita langsung ke kode HTML untuk mengubah angka-angka pada kolom teplate. Silahkan anda simak.


/* Header
-----------------------------------------------
*/

#header-wrapper {
width:990px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 990px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 480px;
float:$startSide;background:#C3D9FF;border:0pxsolid $bordercolor;#0066cc;padding:15px 15px .25em;
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: 260px;
float: $endSide;background:#0066CC; border:0px solid $bordercolor;white; padding:5px 5px .25em;
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 */
}
#sidebarbaru-wrapper {
width: 200px;
float: left;background:#0066CC; border:0px solid $bordercolor;white; padding:5px 5px .25em;
psdding-right:5px;
word-wrap: break-word;
overflow: hidden;
}

Dalam pengaturan ukuran kolom template,lebarnya harus disesuaikan dengan dengan lebar header wrapper/main wrapper (dalam px=pixel) dari contoh diatas memiliki lebar 990px). Dalam pengaturan berikutnya jumlah dari lebar : main wrapper, sidebar wrapper dan sidebar baru wrapper harus berjumlah 990px (sama dengan lebar header wrapper/outer wrapper)
Untuk lebih jelasnya kita lihat perinciannya :

1. Lebar Main wrapper = 480px, padding = 15px+15px=30px, jumlah 510px
2. Lebar Sidebar wrapper = 260px, padding = 5px+5px=10px, jumlah = 270px
3. Lebar sidebar baru wrapper = 200px, padding = 5px+5px=10px, jumlah = 210px
4. Lebar Main wrapper + sidebar wrapper + sidebar baru wrapper = 510px + 270px + 210px = 990px

Setelah selesai mengotak-atik angka pada kolom template, klik Simpan Template
Lihat Blog anda yang baru...!!!
baca juga disini EPD Studio

Comments :

0 komentar to “MENGUBAH LEBAR SIDEBAR”

Posting Komentar

silahkan isi komentar tetapi dengan bahasa yang sopan itu lebih baik dan bijak, yang berarti menandakan kalian orang yang berakhlak dan beragama....