MENGUBAH BAGIAN FOOTER MENJADI TIGA KOLOM

Kolom template pada bagian footer (bagian bawah, umumnya hanya memiliki satu kolom. Akan lebih menarik jika kolom tersebut kita bagi menjadi tiga bagian.
TemplateBlog ini memiliki lebar kolom keseluruhan adalah 960px atau 960 pixel. Jadi tips kali ini berpanduan pada lebar kolom template blog ini. Bagi anda yang memiliki lebar template yang berbeda dengan blog ini dapat anda lakukan perubahan pada angka-angka yang ditampilkan nantinya.
Agar kode HTML pada template anda tidak terlalu rumit, jangan anda kasih tanda contreng pada Expand Template Widget.
Sebelum menambah 3 kolom pada bagian footer, sebaiknya anda lihat dulu berapa lebar keseluruhan kolom template anda (lihat pada bagian outer wrapper). Katakanlah lebarnya 960px. Jadi dalam penambahan 3 kolom template tersebut, anda harus berpatokan pada lebar outer wrapper tadi.
Karena penambahan yang akan kita lakukan adalah sebanyak 3 kolom, berarti kolom yang akan kita buat adalah 960px:3=320px. Dari 320px itu belum termasuk padding (jarak tulisan dengan bagian pinggir). Padding pada contoh nanti berjarak 15px, berarti lebar kolom menjadi 330px - 15px = 315px.
Setelah mengotak atik angka tadi sehingga pas untuk template anda, kita masuk pada langkah-langkahnya.


1. Sekali lagi jangan diberi tanda contreng pada Expand Template Widget.
2. Cari kode ]]></b:skin> , kemudian copy kode dibawah ini dan letakkan tepat diatasnya.

/* bottom
---------------------------- */

#bottom {
width: 990px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;

}
#bottom ul li a:hover {
background: #B1ACB1;
}

#left-bottom { /* kode kolom kiri */
width: 315px;
float: left;
padding-left:10px;
}

#center-bottom { /* kode kolom tengah */
width: 315px;
float: left;
padding-left:10px;
}

#right-bottom { /* kode kolom kanan */
width: 315px;
float: left;
padding: 0 5px 0 10px;
}

3. Cari kode dibawah ini pada bagian </body> .

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

4. Copy kode dibawah ini dan paste tepat diatas kode tadi

<div id='bottom'> <b:section class='bottom' id='left-bottom'/> <b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
</div>

5. Klik Simpan Template
6. Selesai. Sekarang anda tinggal mencoba kolom yang baru dibuat tersebut. Tambahkan sesuatu pada blog anda (gambar atau tulisan)

Related post by Category