Cara Menambah Tiga Kolom di Bawah Header

Cara Menambah Tiga Kolom di Bawah Header. Template Blogger kian banyak macamnya. Mulai dari yang berkonsep minimalis, hingga magazine style. Beberapa template baru memiliki footer tiga kolom,tetapi terkadang pula template yang kita pilih juga tidak memiliki footer 3 kolom. Nah bagi anda yang malas ganti template atau sudah sreg dengan template sekarang dan ingin menambah footer 3 kolom, tips ini mungkin berguna. atau ingin meletakkannya footer di bawah posting juga bisa. Hasilnya akan seperti gambar dibawah

Oke, langsung saja ke tutorialnya:

• Login ke blooger.com

• Kemudian masuk ke Rancangan ---> Pilih Edit HTML

• Klik “Expand Widget Template”

•  Cari kode berikut ini pada template anda ]]></b:skin>

• Tambahkan kode dibawah ini diatasnya

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

• Cari kode CSS berikut ini pada template kawan-kawan

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Ket: pada beberapa template kodenya: footer atau footer-section.

Jika sudah ketemu ganti kode berwarna biru dengan kode CSS dibawah ini

<div id='footer-column-divide'>

<div id='footer1' 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='footer2' 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='footer3' 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;'/>
</div>

• Simpan template dan lihat hasilnya dibagian elemen halaman, jika berhasil sobat akan melihat seperti screenshot diatas.

bagaimana, mudahkan?? selamat mencoba sobat... :)