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
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%'/>
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'>Mungkin di beberapa template berbeda-beda penamaannya ada yang “footer-wrap” atau “footer”. Setelah di temukan tumpangi kode merah tadi dengan kode dibawah ini:
<b:section class='footer' id='footer'/>
</div>
<div id='footer-column-container'>Setelah itu copy kode CSS dibawah ini, taruhlah sebelum kode </b:skin>
<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>
#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%'/>
Nice post i will share it on Facebook.
BalasHapus@business logo design= thank you ^_^
BalasHapusSory baru mampir lagi sob.... gimana kabarnya wong Cirebon nih ???
BalasHapusWilujeng tepang ki dulur.. tutorialnya mantaap nih
BalasHapus@Saung Web= iya kenapa, baik kang . . .
BalasHapus@Dofollow Blog Community= (*_*)matur nuhun
makasih ya tutorialnya.
BalasHapus@estilosweb sama-sama ...
BalasHapusmakasih sob salam kenal
BalasHapus