Info Tips & Trick Cyber Memandai

Bedah Footer Menjadi 3 Kolom

ads
Cara Membuat Footer Menjadi 3 Kolom Langsung saja kita ikuti langkah-langkahnya berikut ini:

1. Akses Blogspot anda
2. Klik Layout
3. Klik Edit HTML
4. Backup terlebih dahulu template anda dengan mengklik Download Template Lengkap dan simpan ditempat yang anda inginkan.
5. Copy script CSS dibawah ini diatas kode </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
6. Cari script seperti di bawah ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</div>
7. Hapus yg warna merah dan ganti dengan script dibawah ini
<div id='footer-column-container'>
<div id='footer2' style='width: 30%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 40%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 30%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
<p>
<hr align='center' color='#ffae00' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding:
10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>
</div>
<div style='clear:both;'/>
</div>

Script yang berwarna diatas bisa anda ganti dengan code warna lain.

8. Sinpan Template anda
9. Klik Tata Letak dan lihat hasilnya


Semoga Berhasil.............
Halaman Ini Telah Di Lihat

Your Ad Here

0 komentar:

Posting Komentar

 
© Copyright cempakul
Original theme by ZULHEPNI