Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Footer Menjadi 3 Kolom Pada Blogger.Com

 Berikut Langkah-langkahnya :
1. Download template anda
Sebelum kita meng-Edit template kita sebaiknya kita download dulu agar kalau terjadi kesalahan / hal-hal yang tidak diinginkan tidak terjadi.Cara mendownloadnya sangat mudah: masuklah ke Layout–>Edit Html–> Download Template
2. Hilangkan widget yang berada di footer/ anda bisa memindahkannya untuk sementara waktu
3. Masukkan kode kedalam template Masuklah ke Edit HTML yang berada di layout, jangan di centang “Expan widget templates”
Sekarang carilah kode merah dibawah ini, anda bisa gunakan CTRL+F
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>

</div>
Mungkin di beberapa template berbeda-beda penamaannya ada yang “footer-wrap” atau “footer”. Setelah di temukan tumpangi kode merah tadi dengan kode 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='#5d5d54' 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>
Setelah itu copy kode CSS dibawah ini, taruhlah sebelum kode </b:skin>
#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Setelah itu silahkan simpan hasil template anda



Catatan :
Pada bagian kode yang berwarna merah menunjukkan kode warna yang bisa anda ubah
<hr align='center' color='#5d5d54' width='90%'/>

8 komentar untuk "Cara Membuat Footer Menjadi 3 Kolom Pada Blogger.Com"