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(http://4.bp.blogspot.com/_sunpK_FtO1E/SmMfd-sXSwI/AAAAAAAAAKo/0_h1MZzE4N8/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(http://3.bp.blogspot.com/_sunpK_FtO1E/SmLdt9WXxMI/AAAAAAAAAJM/GPX39b8qcLg/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










Share Gadget
Stumble
Delicious
Technorati
Twitter
Facebook
Blog
Gadget


Jika anda sukakan article ini,linkkan kembali...



Dicatat oleh Thalhah Amir on Rabu, 1 Disember 2010

0 ulasan

Catat Ulasan

Cari Blog Ini

Pengikut

Pengikut Facebook

Informasi

SyoknyerBlogging adalah sebuah blog tutorial untuk bloggers yang menggunakan platform blogspot. Semua tutorial disini adalah daripada pengalaman sy berblogging selama 3 tahun. Sy bukan untuk mengajar tetapi lebih kepada berkongsi. Harap anda gembira disini. (^^,)

Mengenai Saya

Foto saya
Sy sangat sukakan web. Seorang Programmer. Pemilik Syoknyerblogging
Copyright 2010 | SyoknyerBlogging | Belajar Blogging Dalam Bahasa Melayu
Zengard Template designed by the Jinsona Design and XML coded by CahayaBiru.com