Posted by AlmansuQie™

Emoticon Di Post Entry

Emoticon Yahoo! Messenger..Sebenarnya dah ramai yang buat tutorial ni.. Ana tulis balik untuk simpanan peribadi..Ok untuk yang ini, caranya begini..

Posted by AlmansuQie™

Blogspot Dengan Gaya Wordpress

Pernah tengokkan wordpress?? Kali ini kita buat template kita macam wordpress skit. Kita main sorok-sorok widget.

Posted by AlmansuQie™

Cara Membuat Favicon

Assalamualaikum..ok..Kalau kita buka sesuatu website atau blog maka kekadang kita tengok ada gambar atau icon pada address bar (kat tempat alamat url tu).

Posted by AlmansuQie™

Membuat Label Flash (Blogumus)

Ha tutorial ni Ana ambil dari Blogger Buster. Cantik kalau dapat buat label macam ni..Ini untuk simpanan Ana, kalau Antum minat boleh ikut tutorial ni..

Posted by AlmansuQie™

The Cutest Blog On The Block

Teringin untuk menggunakan transparent background macam ini??Menarik kan?? Ada bayak lagi..Boleh dapatkannya di LamanIni. Untuk menampalnya di blog senang saja.

Posted by AlmansuQie™

Cara Membuat Menu Tab View

Apakah makhluk yang bernama Menu Tab View ni?. Boleh tengok sebelah kanan blog ni. Ana isikan dengan tips2/artikel2 di dalamnya. Kotak menu ni sangat berguna.

Mengubah Saiz Lebar Colom

Cerita pasal template ni.. Ada yang tanya macam mana nak ubah saiz colom yang ada dalam template kita? Untuk kali ini Ana akan cuba bagi tips yang mudah tapi pening. 04Sekaligus dapat menambah kefahaman kita berkenaan kod CSS. Walaupun Ana sendiri xtau ape tu CSS.04 Untuk pengetahuan, sebenarnya mana2 template yang kita download dan gunakannya boleh diubah saiz dan bentuknya, warna juga gayanya. Makna kata boleh ubah dari sebuah pondok usang menjadi banglow mewah!

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..48

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.40 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..

Tips² Terkait



13 Komentar:

Ary June 22, 2009 at 9:46 AM  

dah mula pening nih....:-o

Ary June 24, 2009 at 2:27 AM  

alhamdulillah...tq,akhirya ana paham gak...:)

_kim_ August 14, 2009 at 8:10 PM  

bru je bace dah garu kepala da...hehe..memang pening...

skyjamil August 16, 2009 at 4:55 PM  

tak paham mok cik, tadi nak paham dah..pastu mula la...

Unknown August 25, 2009 at 10:04 PM  

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!!!

CUPING MERAH September 14, 2009 at 2:19 PM  

http://i302.photobucket.com/albums/nn113/aburifaie/smiley/13.gif

bertambah pening ni..

mely November 7, 2009 at 2:51 PM  

x paham langsunggggggggg

mely December 23, 2009 at 4:02 PM  

xpaham lah yg nak ubah saiz 2 2...

Anonymous,  January 14, 2010 at 10:36 AM  

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...

Taufiq Tiramisu February 1, 2011 at 5:27 PM  

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.. ;(

Anonymous,  November 26, 2011 at 8:42 AM  

adusss...peningnya....tapi ia sangat membantu ,hehe...ne baca skali lagi napaknya....t.q ea tuan.... 5 bintangg ;;)

Unknown March 23, 2014 at 4:26 AM  

awa tidak paham sama sekali,,,

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>

© Hak Cipta Terpelihara 2008 [:: AlmansuQie ::]
http://almansuqie-tips.blogspot.com
Template Designed By: AlmansuQie™

Paparan Lebih Kemas Dengan Firefox