0 Cara Membuat Footer 3 Kolom di blogger

Pengen nambah kolom di footer blog nih... muter-muter dan akhirnya ketemu juga gara-gara minta tolong sama "Mbah Google". Footer yang saya buat jadinya kayak gini nih sob!

blog 3 kolom footer

telusur terus ternyata mudah bikinnya! Oke langsung aja kita modif template blogmu!

1. Login Blogger
2. Dari Dasbor klik Rancangan
3. Klik Edit HTML
4. Centang 'expand widget template'
5. Cari kode ]]></b:skin>
6. Masukkan kode di bawah ini di atas kode ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}



7. Cari kode berikut atau semiripnya
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>



8. Kalo udah ketemu tambahkan kode ini di atasnya!

<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>

9. Langkah terakhir dari semua langkah yaitu,,, SIMPAN

Nah coba sekarang lihat Elemen blogmu! Gimana ada yang nambah kan?



Tidak ada komentar:

Posting Komentar

Terima Kasih Telah Berkunjung di Blog Ini Update terus untuk mendapatkan Artikel terbaru

X