Untuk Kali ini sy akan berkongsi cara untuk membuat 3 kolum pada bahagian footer. Tutorial ini tidak diperlukan bagi blogspot user yang menggunakan blogspot template designer kerana mereka boleh menukar jumlah footer pada bila2 masa menggunakan template designer. Jika anda mempunyai banyak widget untuk diletakkan pada blog dan ruang pada sisi sidebar sudah terlalu byk atau serabut maka dengan membuat footer ini akan membuat blog lebih kemas dan lebih byk ruang untuk diletakkan widget. Bagaimana Caranya? mudah sahaja. Ikuti langkah 1 per 1.

1 Masuk kedalam Dashboard > Design > Edit HTML.
2 Back up template sebagai langkah keselamatan. Dashboard > Design > Edit HTML > Download Full Template.
3 Cari koding footer yang sedia ada di hujung coding seperti ini

<div id="footer-wrapper">
<b:section class="footer" id="footer">
</b:section></div>

Jika sudah ada kandungan pada blog, koding mungkin lebih panjang

4 Copy dan paste the code dibawah serta merta selepas </div>.

<!-- three column footer HTML Start by SyoknyerBlogging.blogspot.com -->
<div id='lower'>
<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
</b:section>
</div>
</div><!-- three column footer HTML End by SyoknyerBlogging.blogspot.com--> 

5 Copy the code below and paste it in CSS section, before ]]></b:skin>

/* -----   LOWER SECTION Start By SyoknyerBlogging.blogspot.com  ----- */
#lower {
       margin:auto;
       padding: 0px 0px 0px 0px;
       width: 100%;
       background:#252423 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIUx-njs4fJZ5M9kRZs3o3gAnH3l1X85OjIK5F1eDNnHBRCOtr8T8MXEkWC-E28aUXgvoUlydHMRzyr6Z-MRD_e2wzMKspkao7fhsoq2yiAyghqwcD7YdjPtCpdvPTDfcqe_hC-V2cptHj/s1600/lowerbg.png) repeat-x top;}  
#lower-wrapper {
       margin:auto;
       padding: 5px 0px 0px 0px;
       width: 960px;}

#lowerbar-wrapper {
       color:#a4a5a1;
       float: left;
       margin: 0px 5px auto;
       padding-bottom: 20px;
       width: 32%;
       text-align: justify;
       font-size:100%;
       line-height: 1.6em;
       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 */
}
       .lowerbar {margin: 0; padding: 0;}
       .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;}
       .lowerbar h2 {
       margin: 0px 0px 10px 0px;
       padding: 3px 0px 6px 0px;
       text-align: left;
       font-style:italic;
       color: #2888b5;
       font-size:20px;
       font-family:georgia, trebuchet ms, times new roman;
       background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1-Rdce5q9uJ96T3-foLDt6z9gdej5H6LVfY2Ya1Wjsb5JZzCHv9bjaghibKlPlveMQcjzOVluj7TtckxIDv459RCHsw6Ycc_671X-OIcW9njzlydXtDYpyii5UqgIH603YXS4j0kaloif/s1600/border.jpg) repeat-x bottom;
}

.lowerbar ul {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      list-style-type: none;
}

.lowerbar li {
      margin: 0px 0px 2px 0px;
      padding: 0px 0px 1px 0px;
      border-bottom:1px solid #373127;
}

.lowerbar a {color: #fff; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: #171615}
.lowerbar a:visited {text-decoration: none; color: #fff;}

/* -----   LOWER SECTION End By SyoknyerBlogging.blogspot.com  ----- */

6. Save template dan pergi ke Design > Page Elements. Anda akan melihat 3 kolum pada footer

---

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="http://syoknyerblogging.blogspot.com/2010/12/module-7-cara-membuat-3-kolum-footer.html">Module 7: Cara membuat 3 kolum footer</a>