Jan 27, 2009

Tiga Kolum Di Ruangan Bawah


Atas permintaan Along Arman, kali ini penulis akan memberikan tutorial berkenaan dengan menambah tiga kolum di bahagian footer. Penulis difahamkan dia telah mendapat kod untuk tiga kolum tersebut tetapi kod asas yang diberi tiada warna latarbelakang (background) dan garisan (border) untuk setiap tajuk. Ayuh, masuk kelas tutorial. Pastikan anda membaca berulangkali agar mudah difahami.


1. Pindahkan semua widget yang ada di bahagian footer.

2. Login ke Blogspot.

3. Layout - Edit HTML.

4. Download Full Template sebelum mengedit blog.

5. Cari kod di bawah.

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

6. Tukarkan kod yang berwarna merah dengan kod di bawah.

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

Nota : <hr align='center' color='#5d5d54' width='90%'/> adalah satu garisan lurus yang bertujuan membahagikan ruangan footer dengan ruangan paling bawah. Anda boleh mengubah warnanya mengikut warna latarbelakang blog. Jika tidak mahu garisan itu, anda cuma perlu buang kodnya sahaja.

7. Seterusnya cari pula kod </b:skin>.

8. Tambah kod ini sebelum </b:skin>.

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Nota : Kod footer-column-container { di atas ialah kod asas bagi tiga kolum di footer yang diajar oleh Amanda. Penulis telah melakukan pengubahsuaian dengan menambah #footer-column-container h2 { di antara #footer-column-container { dan .footer-column { berdasarkan tutorial empat kolum ruangan atas tulisan Ien.

Inilah kod yang penulis gunakan untuk bahagian footer-column-container { milik penulis. Ia dilengkapi dengan warna latarbelakang dan garisan pada setiap tajuk dan juga kotak utama kolum tersebut.

#footer-column-container {
clear:both;
background: #ffbbbb;
line-height: 1.4em;
margin:auto;
height: 200px;
border: 1px solid #cc0000;
width: 900px;
margin-bottom: 10px;
}

#footer-column-container h2 {
margin: .5em 0 .5em;
padding: 4px 5px;
font-size: 12px;
font-family: verdana;
color: #ffffff;
background: #333333;
padding: 5px;
margin-top: -1px;
}

.footer-column {
padding: 10px;
}

Nota: Anda boleh mengubah setiap kod yang penulis tebalkan mengikut kesesuaian blog anda.

9. Save template.

Kini, anda sudah siap memasukkan tiga kolum di footer. Anda perlu memastikan ianya berfungsi dengan baik agar widget baru dapat dimasukkan.

1. Layout - Page Elements.

Di bahagian bawahnya, anda akan melihat tiga kolum baru sudah tersedia. Tugas anda seterusnya hanyalah memasukkan widget² kegemaran anda. Pastikan anda membaca dengan teliti sebelum mencuba tutorial ini. Semoga sukses.

Via : Amanda
Via : Ien


24 Comment

Anonymous

thanks eryza.. dah bleh buat dah. cuma background masih tak jadi.. template ni pening skit.. agaknya kene pakai template yang biasa senang nak edit...

Anep™ Tue Jan 27, 05:52:00 PM

eryza..
tahu x camne nk besar kan colum..
contohnyer..sye de 3 kolum..sye nk besarkan kolum tgh..tnpa mengubah 2 kolum di tepi..kire full page..

@LiYaNNuaR ツ Tue Jan 27, 06:17:00 PM

fuh... tgk pd coding... bole tahan jugak cabarannya... anyway... thanks for sharing... ada masa... bole gak cuba benda nih...

Eriyza Tue Jan 27, 06:26:00 PM

Along Arman : Main kod html css nih mmg camtuh. Sbb tuh sy lebeh suka guna template berasaskan Minima, senang nak edit. :)

Gempakz : Kalo nak ubah saiz, kena pastikan width outer-wrapper, main-wrapper dan sidebar-wrapper seimbang. Kalo tak, sidebar akan jatuh ke bwh. Maknanya kena ubah seme saiz di atas. :D

AliyaAnnuar : Itu ler cabaran bermain koding. :P

Intan Hanina Fri Jan 30, 10:07:00 PM

cam ganjil jor bile taip kolum.. uhuhu! (larriii!)

Eriyza Sat Jan 31, 09:03:00 AM

Ien : Gitoo ler jadiknya bila inggeris dimelayukan. Huhuhu!!! b-(

Anonymous

tp bile check dalam kamus, column tu lajur.. kalau taip lajur ader yg xdpt tangkap plak maksudnya uhuhu!

Eriyza Sat Jan 31, 09:57:00 AM

Ien : Aha, betul tuh. Sebab tuh laa tulisan lam blog pun dah bercampur aduk slanganya. Asalkan org paham cukup ler.

@LiYaNNuaR ツ Sun Feb 22, 11:00:00 PM

baru nak cuba... x jumpa pulak code yg nak dicari...

Eriyza Sun Feb 22, 11:24:00 PM

AliyaAnnuar : Cari kod yg lebih kurang dgn kod asal.

@LiYaNNuaR ツ Mon Feb 23, 05:21:00 PM

akhirnya sya bjaya jugak... itu pun dah jenuh ejas sana sini... thanks Eriyza... nanti nak try buat yg sebelah atas pulak... huhuhu...

Eriyza Tue Feb 24, 12:14:00 PM

AliyaAnnuar : Usaha tangga kejayaan. :)

Anonymous

great post:) i've made it in my blog

Eriyza Fri Mar 13, 11:46:00 PM

Asaloesoel.co.cc : You're welcome. :)

hz wan Sat Apr 11, 10:25:00 PM

mcm mne nak ubah warna garisan...ape code utk warna?

Eriyza Sat Apr 11, 10:56:00 PM

Hz Wan : Anda boleh menukarnya di step no 8 yg penulis tebalkan. Warna bleh dirujuk di http://www.computerhope.com/htmcolor.htm

hzwan Sun Apr 12, 07:11:00 AM

ok...thanks

Eriyza Sun Apr 12, 10:27:00 AM

Hz Wan : Sama². ;)

Unknown Tue Apr 14, 10:27:00 PM

salam Eriyza..
terima kasih.. sudi dapat diaplikasi ke blog kakyong Catatan Ibu.. :X

Eriyza Wed Apr 15, 01:13:00 PM

Kak Yong : Wsalam. Sama². :)

Anonymous
This comment has been removed by the author.
Anonymous

Assalamu'alaikum Wr.Wb Salam kenal dari negara tetangga Indonesia, semoga indonesia dan malaysia menjadi negara yang rumpun, damai tidak ada lagi permasalahan By. xtrawah.blogspot.com Wassalam.

Unknown Mon Apr 02, 12:44:00 PM

assalamualaikum ,kak macam mana kod yang perlu dicari tak ade??? tolong saya yer .....emel saya yer kk.... zulhairiaziz@yahoo.com

Eriyza Mon Apr 02, 03:21:00 PM

@zulhairi aziz:
Kalau anda menggunakan layout yang diconvert dr wp, mungkin kodnya tidak sama. Cuba guna layout blogspot yg asli.

Post a Comment

Gunakan tatabahasa yang betul sewaktu menulis komentar agar mudah difahami oleh penulis. Terima kasih. :-)

Sila ambil perhatian perkara² berikut :-

1. Tinggalkan nama dan url blog atau laman web anda.
2. HTML tag seperti <b>, <i>, <a> boleh digunakan.
3. Sila berhemah di dalam berbahasa.