3 Footer Columns

Hait.. menerjah lagi aku kali ni ngn tutorial baru. Alang² aku nak ubah templete blog aku, so aku terus wat tutorial untuk dikongsikan bersama korang. huhuhu.. Tutorial kali ni berkenaan dengan Blogger Footer. Jika korang menggunakan default blog template, korang mesti perasan pada bahagian Footer section, hanya ada horizontal Add a Gadget element yang sama kelebarannye ngn lebar blog. Contohnye seperti gambar nih.

So, jom kite ubah suai ( mcm nak modified kereta kancil biru plak. huheuheu.. ada org terasa ke nih?.. :-P ). Dalam tutorial ni, aku nak jadikan 3column pada bahagian footer dan letakkan default column tu dibahagian bawah. Contohnye seperti dibawah.
Kelebihannya:
►Korang boleh letakkan lebih widgets (gadgets).
► Susun mengikut kesukaan korang.
► Kandungan blog korang akan di LOAD lebih cepat jika korang letak gadget yang berat²(yg besar² saiznye la. bkn berat sekilo dua kilogram. huehueheu.. ) dibahagian bawah.

1. Jika terdapat widget (gadget) pada Footer, remove-kan terlebih dahulu:
LAYOUT ► check jika ada widget pada footer ► jika ada, click pd Edit dan ► Remove

atau, terus "drag" je ke Sidebar. Korang blh drag semula ke Footer setelah selesai menambah column pd footer.

PERINGATAN: Jangan lupa backup template anda terlebih dahulu!
(p/s: thanks putera al-maliki cz ingatkan saya =D )

2. Pergi ke LAYOUT ► EDIT HTML ► dan cari code seperti dibawah ni:
(p/s: korang boleh guna Ctrl+F untuk mencari koding dengan senang)

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

Kemudian, paste koding dibawah ni tepat² diatas koding diatas tadi.

   #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;
   }

ini adalah coding CSS style untuk Footer section korang yang baru.

3. Untuk menambah container didalam layout korang, pergi ke LAYOUT ► EDIT HTML ► dan cari coding ni:

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

korang kena DELETE code tu, dan REPLACE dengan code ni:

   <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 template.

tutorial ini boleh juga digunakan pada templete yang berbeza width, kerana columns yang ditambah telah disetkan secara auto mengikut saiz kelebaran width template anda.

Yang Betul,