Cara Membuat Footer 3 Kolom di Blogger

Postingan ini akan membahas tentang cara menambahkan footer di blogger. Footer itu letaknya dibawah, bisanya dipake untuk memasang widget-widget tertentu. Disini akan dibahas footer yang terdiri dari 3 kolom. Contoh bentuk footer lihat saja diblog ini di bagian bawah, disitu saya pake buat naruh widget-widget statistik dari blog ini.

Langsung saja, berikut step-stepnya:

1. Login ke blog sobat terlebih dahulu.

2. Klik Template > Edit HTML 

3. Cari code ]]></b:skin> untuk mempercepat taruh kursor mouse di kotak edit htmlnya lalu gunakan Ctrl+f 

4. Copy code di bawah ini lalu letakkan tepat di atas code ]]></b:skin> 

 #footer-column-container {     

clear:both;     }    

 .footer-column {     

padding: 10px;     

}

5. Selanjutnya cari code <div id='footer'> atau id='footer' 

6. Lalu copy lagi code di bawah ini letakkan tepat di bawah code <div id='footer'> atau id='footer' 

<p>

    <hr align='center' color='#ffae00' width='90%'/></p>

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

keterangan. code warna merah adalah code buat membatasi atas bawah menggunakan garis , jadi kalau mau dihilangkan juga gak masalah. 

7. Kalau sudah silahkan Save Template sobat.

Nah sekarang coba sobat lihat di Tata Letak atau layout. Sudah berubah kan hehe..

Happy blogging

WAJIB BACA!

Penghasilan Online paling realistis dan anti SCAM. Kerja Online cuma dengan mengetik kode captcha, anda digaji dollar. Silahkan baca postingan kerja online ketik captcha disini.

Share artikel ini :

Labels: Blogging

Artikel Terkait