Update Terbaru
Loading...
Home » , » Cara Membuat 3, 4, 5 Kolom Footer di Blogspot
Published On : Senin, 19 November 2012
06.19.00 | Admin | No Comments

Cara Membuat 3, 4, 5 Kolom Footer di Blogspot



Gadget Footer, Cara bikin 3, 4, 5 kolom footer di blogspotKadang 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 , itulah latar belakang kenapa saya posting tentang cara Buat Footer Multi Kolom ini, disamping sebagai arsip pribadi , siapa tahu nanti akan utak-atik bagian footer lagi, kan dah ada disini seperti postingan yang dulu tentang Cara Membuat Kolom Tambah Gadget di Bawah Header ,  atau siapa tahu ada sobat yang memerlukannya .
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

Selamat mencoba.. untuk Buat Footer Multi Kolom …



http://zonablogging.blogspot.com/2012/05/cara-bikin-3-4-5-kolom-footer-di.html


Related Post

0 komentar:

Posting Komentar

Referensi : DTE | MDF Blog | MKR Site
Copyright © 2013. Gembulz Blog's - All Rights Reserved
Template Created by Creating Website Modify by Gembulz Blog's
Powered by Blogger Top