Peluang mendapatkan uang saku tambahan dari internet dengan mudah. klik disini

Cara Membuat Footer 3 Kolom

.
kali ini saya ingin menjelaskan bagaimana cara membuat footer 3 kolom di blog.
karna cara ini sudah banyak bertebaran di mesin pencari jadi gak ada salah nya kan saya juga membuat artikel tentang Cara Membuat Footer 3 Kolom ya itung-itung untuk koleksi pribadi la, dan juga untuk para blogger baru seperti saya ini.hehe

ok kita langsung aja ke cara pembuatannya.
1. Seperti biasa Login ke blog sobat terlebih dahulu.
2. Klik Template > Edit HTML > beri centang Expand Template Widget
3. Cari code ]]></b:skin> untuk mempercepat 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' tadi
<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>
7. Kalau sudah silahkan Save Template sobat.
Nah sekarang coba sobat lihat di Tata Letak.
bagaimana apakah berhasil..?

Ni screen shot nya sebelum di pasang footer 3 kolom.
Sebelum pasang footer 3 kolom
Sebelum pasang

Dan yang ini ketika sudah di pasang footer 3 kolom
sesudah pasang footer 3 kolom
Sesudah pasang


Ok mungkin segitu aja dulu Cara Membuat Footer 3 kolom
kalau ada pertanyaan silahkan tulis di kolom komentar..
Terima Kasih

0 komentar:

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Posting Komentar

 

Komentar