Rabu, 11 Agustus 2010

Memberi multi kolom diatas footer

Pagi yang cerah merupakan awal hari yang menyenangkan buat semoga Anda sekalian juga merasakan hal sama seperti saya. Dengan hari yang cerah ini saya akan memberikan sedikit tutorial untuk Anda dan ini masih mengenai blog karena saya yakin Anda sekalian ada yang belum bisa dengan tutorial yang satu ini. Dalam kesempatan kali ini saya akan memberikan bagaimana cara memberikan multi kolom diatas footer. Sebagai gambaran Anda dapat melihat gambar dibawah ini.




Sekarang Anda sudah tahu gambaran dari tujuan tutorial yang satu ini. Jika Anda menginginkannya Anda mengikuti langkah dibawah ini:

1. Login ke www.blogger.com
2. Pilih Dasbor
3. Pilih Tata Letak
4. Pilih Edit HTML

5. Tambahkan kode dibawah ini tepat diatas kode ]]></b:skin> . Sekali lagi untuk mengingatkan Anda gunakan Ctrl+F untuk mencari kode tersebut ]]></b:skin>.

/* kolom
---------------------------- */

#kolom {
width: 660px;
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:transparent;
padding: 15px 0 15px 0;
}


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

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

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

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

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

#left-kolom {
width: 205px;
float: left;
padding-left:10px;
}

#center-kolom {
width: 205px;
float: left;
padding-left:10px;
}

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

6. Setelah Anda tambahkan kode diatas, sekarang Anda cari kode dibawah ini :

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

7. Setelah itu Anda tambahkan kode dibawah ini tepat diatas kode yang diatas :

<div id='kolom'>

<b:section class='kolom' id='left-kolom'/>
<b:section class='kolom' id='center-kolomm'/>
<b:section class='kolom' id='right-kolom'/>

</div>

8. Jika sudah selesai tekan tombol Simpan Template lihat di Elemen Halaman.

Tidak ada komentar:

Posting Komentar