Ok kekadang ade template cantik yang kita guna tapi saiz colom tidak memuaskan hati kita. Untuk itu, lihat caranya. Ini kod bagi colom di blog yang tersedia pada template Minima.
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
#footer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
Kod2 merah adalah lebar setiap colom tersebut. Ana terangkan lebih lanjut. Bersedia untuk pening..
1. Pertama, kod header dan outer ini.
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
font: $bodyfont;
}
Ok sekarang size header kita adalah 900px. Juga saiz outer. Outer ni kita xnampak sebenarnya. Die ni kotak yang merangkumi main wrapper dan sidebar. Jika kita ingin mengubah lebar header, outer juga wajib diubah. Biasanya saiz kedua ni mesti sama.
2. Seterusnya pada bahagian Main Wrapper dan Sidebar. Ana gabungkan keduanya untuk mudah difahami.
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
Main wrapper ni adalah kotak untuk posting kita. Dengan saiz 435. Sidebar adalah kotak samada dikiri atau kanan. Jika kita mahu mengubah saiz sidebar, maka saiz main wrap juga mesti diubah.
Contoh: Dengan lebar header dan outer 900px. kita ingin membesarkan colom main/posting dengan 520px. Maka kita mesti mengecilkan saiz sidebar sedia ada kepada 150px atau bla bla.. Begitu juga sebaliknya. Jika sidebar dibesarkan, maka saiz main/post mesti ditambah nilainya. Penatnye nak wat teori ni..
Begitula pada mana2 bahagian pun. Harap xpening lagi.
Tambahan: kod margin. Adalah kod untuk jarak satu colom dengan yg lain. Boleh diubah begini.
margin:10px; (jarak kiri kanan atas bawah adalah 10px)
margin-left:5px; (jarak kiri saja 5px)
margin-right:5px; (jarak kanan saja 5px)
margin-top:5px; (jarak atas saja 5px)
margin-bottom:5px; (jarak bawah saja 5px)
Sekian unutuk kali ini.. Selamat Mencuba..
13 Komentar:
dah mula pening nih....:-o
:D
alhamdulillah...tq,akhirya ana paham gak...:)
bru je bace dah garu kepala da...hehe..memang pening...
tak paham mok cik, tadi nak paham dah..pastu mula la...
salam... enta sangat2 membantu ana... mmg gak fenin lalat, tapi ana try n error la... preview berbelas kali, akhirnya jad seperti ana mau la... terima kasih almansuqie!!!
http://i302.photobucket.com/albums/nn113/aburifaie/smiley/13.gif
bertambah pening ni..
x paham langsunggggggggg
xpaham lah yg nak ubah saiz 2 2...
terima kasih. blog enta begitu membantu. selama ni ana mencari cara untuk masukkan email form dalam blog. ana tgk kawan ana punya blog la...tp dia xsempat nak ajar lebih2...apa pun tengkiu byk2 la...
salam..hehe..
nak tanya ni..kenapa bila saya tambah saiz sidebar, dan saya juga dah tambah size main tu, post saya turun ke bawah..macam tak cukup ruang..tolong balas..perlukan maklum balas.. ;(
adusss...peningnya....tapi ia sangat membantu ,hehe...ne baca skali lagi napaknya....t.q ea tuan.... 5 bintangg ;;)
awa tidak paham sama sekali,,,
:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} ~x( :-t b-( :-L x( =))
Post a Comment
1. Berilah Teguran/Komen Walau Sepatah Kata..
2. Komenlah Dengan Nama dan Blog Sendiri
3. Boleh Guna Kod² Seperti Ini <b>, <i>, <a>