Aku baru saja selesai menyiapkan dan menghantar Laporan Berkumpulan bagi Subjek Teknologi Pendidikan dalam PTV (MBE1053). Tibalah masanya untuk berfoya-foya dengan lelaki simpananku blogku yang tercinta. Oh, ya! Sebentar tadi aku telah berjaya menghasilkan 3 column footer untuk blogku. Walaupun hasil akhirnya kelihatan amat ringkas, namun aku tetap ingin berterima kasih kepada Pak Cik Google kerana telah memudahkan aktiviti penghasilan 3 column footer tadi.

Kenapa aku beria-ria nak hasilkan 3 column footer? Sebabnya...blogku 'kekurangan kasih sayang' untuk meletakkan sebarang widget pada bahagian footer. Hasil bantuan Pak Cik Google yang baik hati, aku telah berjaya menemui pelbagai tutorial yang berkaitan dengan penghasilan 3 column footer. Tetapi, secara ikhlas...aku amat berkenan dengan tutorial daripada [blog ini]. Tutorialnya mudah difahami dan mengandungi modifikasi pada bahagian CSS yang LENGKAP.

Hasil copy paste coding yang telah aku lakukan, aku memperolehi hasil seperti berikut:



SEBELUM (Page Elements - Tiada 3 Column Footer)



SELEPAS (Page Elements - Ada 3 Column Footer)



SEBELUM (Interface - Tiada 3 Column Footer)



SELEPAS (Interface - Ada 3 Column Footer)



Alamak! Apa dah terjadi ni? 3 column footer telah melampaui batas sempadan antarabangsa. Tak suka! Terpaksalah aku melakukan bedah siasat terhadap coding CSS tadi dan melakukan beberapa modifikasi seperti berikut:


/* three column footer CSS Start by BloggerSentral */
#new-footer-wrapper {background: #666666; border: 3px solid #666666; margin: 0 auto; width: 900px; padding: 0 10px 10px 0;}
#column1-wrapper, #column2-wrapper, #column3-wrapper {float: left; display:inline-block; width: 33%; padding: 0px 0px 0px 0px; text-align: left; 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 */} .new-footer h2 {margin: 0px 0px 0px 0px; padding: 4px 10px 4px 10px; text-align: left; color: #222222; background: #C1C298; font-weight: bold; font-size: 0.9em;}
.new-footer .widget {margin: 10px 0 0 10px; border: 1px dashed #000000; background: transparent}
.new-footer .widget-content {padding: 10px 5px 10px 5px;}
.new-footer ul {list-style-type: square; margin-left:15px;}
/* three column footer CSS End by BloggerSentral */


Kesudahannya, hasil akhir eksperimen adalah seperti berikut:



SELEPAS MODIFIKASI CODING CSS



SELAMAT MENCUBA
\(^_^)/


p/s: Tutorial penuh boleh diperolehi daripada
http://www.bloggersentral.com/2009/10/how-to-install-three-column-blog-footer.html


4 Tukang Kata:

xjadi pon..kat mana nak letak coding ni??

huhuhu...memang la x jd bcoz akak copy paste terus coding yg dh modified tu.

1st...akak kena baca tutorial kat link [blog ini]. 2nd...baru la akak blh modify coding CSS tu ikut kesesuaian template akak.

coding yg sy bagi kat atas tu...tu coding yg sy dah modified utk sesuaikn dgn template sy...huhuhu

slmt mncuba skali lagi...(^_^)

oh silap taip kat sini la senang.. dah ade 3 footer..tp die jadi panjang2.

mcm ni
footer 1
footer 2
footer 3

kite nak mcm awk mcm ni..

f f f
o o o
o o o
t t t
e e e
r r r
1 2 3

sorry lmbt. bz study td...x lm lg exam.

ooo...baru sy tau mslh akak. akak guna template 'Minima Blue' kan? akak kena DELETE part ni...


/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}


insyallah mnjadi...smoga brjaya...(^_^)

Related Posts with Thumbnails

\(^_^)/

.:STATUS:.
hr ni 17/9/2011...giler la! dh stahun lbh blog aku x update. giler x giler!
back to top