teknisi komputer handal's

Iklan

Dunia Hacking For Computer, fb, twitter, and Website, Tutorial Hack www.mecok112.blogspot.com

Cara Membuat Footer Multi Kolom

halo Sobat Blogger... gue mau Apdete Apa yach... Soalnya Apdete terus nih bikin pusing kepala nya hehehe
Oh ya gue akan meng-Apdete tentang Cara Membuat Footer Multi Kolom Gimana Setuju Atau Tidak.. 

Langsung saja ke langkah-langkah Buat Footer Multi Kolom itu kira-kira seperti ini :
  1. Masuk dulu ke Dashboard atau ke blogger.com
  2. Terus pilih Layout  dan  Edit HTML
  3. Sebelum lanjut klik dulu deh Download Full Template sebagai backup siapa tahu nanti malah amburadul.
  4. Kalau sudah, cari kode ]]></b:skin>
  5. Diatas kode no. 4 tadi (]]></b:skin> ) , tamnahkanlah kode dibawah ini :
    #footer-column-divide {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }

  6. Sudah ditambahkan belum ??, jika sudah lanjutkan cari kode dibawah ini.
    <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>
  7. Jika dah ketemu , yo kita buat kolom2 dalam footer itu sesuai keinginan kita, caranya  hapus kode warna merah 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>

    Ah..  2 kolom footer aja 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>

  8. Jangan lupa Save Template jika dah ok ya..
  9. Lihat hasilnya , biasanya sih… kalau orangnya baik dan tulus ,hasilnya langsung ok tuh,, kalau belum berhasil.. wah.. wah.. perlu tobat dulu deh.. hehe..

Selamat mencoba.. untuk Buat Footer Multi Kolom … semoga sukses.



0 komentar on Cara Membuat Footer Multi Kolom :

Posting Komentar

Komentarlah Yang Sopan dan Bijak Sana... Salam Artikel Biasa

English French German Spain Italian Dutch Russian Brazil Japanese Korean Arabic Chinese Simplified
Translate Widget by Google