Tutorial Tambah Kolum Pada Blogger Footer

aynora nur | 16 March, 2012,5:14 PM |
Advertisement
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
Aynora Nur adalah seorang penulis blog separuh masa, terlibat dalam bidang hartanah dan perkhidmatan – di Johor, Malaysia. Lulusan MBA. Aktif berblog sejak tahun 2010. Hubungi saya untuk Promosi produk dan servis • Entry kekal di blog • • Pakej mengikut bajet • Daily PV : 35,000 - 45,000 • Monthly PV : 1.1juta - 1.5juta. Info lanjut di about me ...
 
loading...
0 Komen untuk "Tutorial Tambah Kolum Pada Blogger Footer"
DISCLAIMER: All content provided on this "Aynorablogs.Com – Inspirasi Wanita" blog is for informational purposes only. The owner of this blog makes no representations as to the accuracy or completeness of any information on this site or found by following any link on this site. The owner of Aynorablogs.Com – Inspirasi Wanita will not be liable for any errors or omissions in this information nor for the availability of this information. The owner will not be liable for any losses, injuries, or damages from the display or use of this information. This terms and conditions is subject to change at anytime with or without notice.

Boleh komen jika mahu, boleh LIKE jika suka. TERIMAKASIH.

Kisah 25 Filsuf Barat (MATLUTHFI)!! Harga cuma RM22.50 (Asal RM25.00)!

Buat Duit Blog
Back To Top