Kamis, 11 November 2010

Membuat 3 Kolom di Bawah Posting (Footer) blog

Apabila merasa kekurangan sidebar di template blog kita. Karena banyak widget yang akan dipasang, dan penenpatannya ingin terilihat rapi. Mungkin kita perlu menambahkan kolom sidebar. Berikut cara menambahkan 3 kolom di bawah posting.

- Login ke blog
- Masuk ke menu Rancangan, klik Edit HTML
- Copy kode di bawah ini dan simpan di atas kode: ]]></b:skin>

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

#bottom {
width: 660px;
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 { /* kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}

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

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

- Pada bagian </body>, cari kode yang mirip seperti ini:

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

- Copy dan simpan kode berikut tepat di atas kode yang atas 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>

- Klik tombol Simpan Template.

Catatan: sesuaikan ukuran width dan warna dengan template kita

Tidak ada komentar:

Posting Komentar