Tutorial Tambah Kolum Pada Blogger Footer

As'salam...
dengan Bismillah...

Kita nak tambah kolum pada Blogger Footer macam mana? Apa yang mesti kita tahu untuk tambah kolum kat Footer? Erm...jangan risau. Sekarang ni saya nak post entri tentang benda ni...ok, biasanya pada Blogger Template yang standard, pada Footer Section, kita hanya ada satu ruang melintang Add a Gadget element yang sama rupa bentuk dengan blog. Contohnya seperti kat bawah ini:-

Ingat kata saya? Jangan panik...be cool!! Kita boleh buat ia nampak cantik. Jom kita mula dengan menambah 3 kolum pada Footer, dan letakkan yang asal tadi di bawah sekali.

Kelebihannya:
► boleh letak lebih banyak widgets (gadgets)
► susun semula ikut kemahuan kita
► ruang kandungan utama blog akan cepat loading bila kita letakkan widgets paling besar/banyak di bahagian bawah sekali.

Ok, mari kita buat ini. Kali ini kita nak buat kerja2 Copy-Paste. Kerja yang simple dan singkat. Sebelum nak start, back up korang punya template dulu.

1. Kalau ada widgets (gadgets) pada Footer, buang atau pindahkan dulu ke sidebar dsb...
Contoh: LAYOUT ► check kalau ada gadgets pada footer ► kalau ada, click pada Edit dan ► Remove
atau, tarik dan pindahkan ke Sidebar. Bila Footer dah siap, integratekan balik gadget korang pada kolum Footer.

2. Pergi ke LAYOUT ► EDIT HTML ► dan kesan kod berikut:

]]></b:skin>
</head>

..DIBAHAGIAN ATAS kod tersebut, kita masukkan kod berikut:

#footer-columns {
border-top:1px dotted #999999;
clear:both;
margin:0 auto;
}
.column1 {
padding: 0px 5px 3px 5px;
width: 30%;
float: left;
margin:3px;
text-align: left;
}
.column2 {
padding: 0px 5px 3px 5px;
width: 31%;
float: left;
margin:3px 3px 3px 5px;
text-align: left;
}
.column3 {
padding: 0px 5px 3px 5px;
width: 30%;
float: right;
margin:3px;
text-align: left;
}
.addwidget {
padding: 0 0 0 0;
}
#footer-columns ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
#footer-columns li {
margin:0;
padding-top:0;
padding-left:0;
padding-bottom:.25em;
padding-right:15px;
text-indent:-15px;
line-height:1.5em;
}
body#layout #footer-columns {
width: 100%;
margin-left: auto;
margin-right: auto;
}
body#layout .column1 {
width: 32%;
float: left;
}
body#layout .column2 {
width: 32%;
float: left;
}
body#layout .column3 {
width: 32%;
float: right;
}

...inilah style CSS untuk Footer section kita yang baru.

3. Sekarang, tambah kandungan pada bahagian berikut. Pada LAYOUT ► EDIT HTML ► kesan bahagian ini:

<b:section class='footer' id='footer'/>

...DELETE kod di atas, REPLACE/GANTI dengan kod berikut:

<div id='footer-columns'>
<div class='column1'>
<b:section class='addwidget' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column2'>
<b:section class='addwidget' id='col2' preferred='yes' style='float:left;'>
</b:section>
</div>
<div class='column3'>
<b:section class='addwidget' id='col3' preferred='yes' style='float:right;'>
</b:section>
</div>
<div style='clear:both;'/>
</div>
<b:section class='footer' id='footer'/>

...Save/Simpan template korang.

Secara asasnya, itu saja. Ia berguna untuk template yang berbeza lebar, kerana kolum tersebut sangat fleksibel (dibuat agar sesuai dengan ukuran lebar kandungan footer (footer-container). Kadang2 sesetengah margin perlu diubahsuai bagi template yang lebih besar.

Itulah pelajaran/tutorial hari ini. Selamat berjaya. Don't forget! Must always back up your template, ok!!

smile still go on,
aynora nur

Read More ....