Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



MEMBINA 3 COLUMN DI SEKSYEN FOOTER
June 21, 2009
Posted by: Fauzie


Menambah column di bahagian "footer" memberi ruang yang lebih banyak untuk meletakkan "link" atau maklumat. Dari segi format, ianya dapat memberi tarikan ke atas sesuatu blog atau site itu.

Dalam rencana ini, mari kita belajar bagaimana membina (create) column di bahagian "footer" template yang disediakan oleh blogger dengan membuat sedikit tambahan atau "modification" ke atas kod CSS. Contoh 3-column footer ini boleh lihat di sini.

Sekali lagi kita akan menggunakan template minima untuk tujuan tutorial ini. Create satu "blog test" khas untuk ini.

Sebagai pemulaan untuk tutorial ini, klik Dashboard->Layout->Edit HTML->Klik Expand Widget Template.

Skrol ke bawah dan cari kod berikut: <div id='footer-wrapper'>

Nota: Jika anda tidak ingin skrol, cara yang paling mudah untuk mencari kod ini (dan lain-lain kod) ialah dengan menekan butang Ctrl dan F serentak. Taipkan kod di atas di dalam kotak yang "pop-up" di bahgian bawah screen dan anda akan di bawa terus ke kod tersebut.

Ini ialah screenshot kod tersebut.


Seksyen ini juga dipanggil sebagai "footer-wrap" atau "footer".

Apabila anda telah menemukan kod di atas, sila "delete" kod <b:section class='footer' id='footer'/> . Lihat screenshot di bawah ini.



Selepas anda "delete" kod ini, apa yang anda perlu lakukan sekarang copy & paste atau taip kod-kod di bawah ini di bahagian bawah kod <div id='footer-wrapper'>.

<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='100%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px;'>
<b:section class='footer' id='col-bottom' preferred='yes'/>
</div>
<div style='clear:both;'/>
</div>


Kedudukan kod-kod ini adalah seperti berikut:

<div id='footer-wrapper'>
Copy & paste kod-kod di atas di bahagian ini
</div>
</div></div> <!-- end outer-wrapper -->

Klik Preview. Jika tiada apa-apa masaalah, klik Save Template.

Nota: Kod yang berwarna maroon di atas ialah kod untuk garisan lintang (horizontal line). Anda boleh tukar warna kepada warna yang anda suka. Jika ingin putih, tukar #5d5d54 kepada white.

Sekarang mari kita tambah "style" untuk seksyen footer ini. Klik Edit HTML->Klik Expand Widget Template dan cari kod ini "</b:skin>". Jika tidak jumpa tekan butang ctrl+F seperti diterangkan di atas.

Taipkan kod-kod berwarna maroon ini di bahagian atas kod "</b:skin>".

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

.footer-column {
padding: 10px;
}
</b:skin>

Apabila semua kod ini telah ditaip, klik save template. Sekarang template anda telah mempunyai seksyen footer baru. Untuk melihatnya, klik Layout.