Vendra Zone™

Kadang kala pada template yang kita pakai ada bagian-bagian yang kita senangi ada pula yang tidak, contoh yang saya alami saat ganti templateternyata tidak ada kolom dibagian footernya., padahal sudah terlanjur senang pada template itu , akhirnya terpaksa deh  kolom footernya ditambahkan sendiri  secaramanual ,



Langsung saja ke langkah-langkah Buat Footer Multi Kolom itu kira-kira seperti ini :

 Masuk dulu ke Dashboard atau ke blogger.com
 Terus pilih Layout  dan  Edit HTML
 Sebelum lanjut klik dulu deh Download Full Template sebagai backup siapa tahu nanti malah amburadul.
 Kalau sudah, cari kode ]]></b:skin>
 Diatas kode no. 4 tadi (]]></b:skin> ) , tanamkanlah kode dibawah ini :

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

 Sudah ditambahkan belum ??, jika sudah lanjutkan cari kode dibawah ini.

        <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>

Jika dah ketemu , yo kita buat kolom2 dalam footer itu sesuai keinginan kita, caranya  hapus kode warna kuning diatas, ganti dengan kode dibawah ini :  Untuk footer 4 kolom, kodenya seperti ini :

        <div id='footer-column-divide'>
        <div id='footer1' style='width: 25%; 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: 25%; 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: 25%; float: right;
        margin:0; text-align: left;'>
        <b:section class='footer-column' id='col3'
        preferred='yes' style='float:right;'/>
        </div>
        <div id='footer4' style='width: 25%; float: right;
        margin:0; text-align: left;'>
        <b:section class='footer-column' id='col4'
        preferred='yes' style='float:right;'/>
        </div>
        <div style='clear:both;'/>
        </div>

 Kalau mau yang 3 kolom,, ambil deh yang 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>

 Ini yang 2 kolom footer, silahkan copas yang ini :

        <div id='footer-column-divide'>
        <div id='footer1' style='width: 50%; 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: 50%; float: left;
        margin:0; text-align: left;'>
        <b:section class='footer-column' id='col2'
        preferred='yes' style='float:left;'/>
        </div>
        <div style='clear:both;'/>
        </div>

Pratinjau dulu biar lebih afdol
Jika sudah silahkan save. cukup sekian dari saya semoga bermanfaat saja bagi yang baca,, hehe