Pengumuman, Waduh, Wall to Wall udah Gak Bisa Lagi ya ? ini Gara" ada Kebijakan Facebook untuk Mengalihkan Live Stream Menjadi Comment Box, Tapi Jangan Khawatir.. Update Status Via Blackberry dan yg lain masih Bisa koq, Mau tau apaan sih Comment Box itu ? Bisa Dilihat Disini, Nah, kalo ada Saran" ttg Gimana cara nge-akalin wall to wall, silahkan Contact Mimin di Facebook Disini atau Twitter @HzCrash, atau Bisa Lewat Fanspage WI Di Disini, Trima Kasih

Cara Membuat Footer Multi Kolom

Penulis on Senin, 12 Maret 2012


Cara Membagi Footer Menjadi Beberapa Kolom - Sebelumnya saya pernah memposting tentang cara membagi bagian sidebar menjadi 2 kolom. Nah kali saya akan membahas tentang cara membagi bagian footer menjadi multi kolom. Multi kolom disini maksudnya bisa jadi 2 kolom, 3 kolom atau 4 kolom. Tergantung dari kebutuhan anda.

Ok, bagi anda yang ingin memperbanyak ruang kolom pada bagian footer template anda. Langsung aja kita mulai:

1. Login ke Blogger. Klik Design -> Edit HTML

2. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.

3. Kalau sudah, cari kode ]]></b:skin>

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Jika sudah cari kode dibawah ini.
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

atau 
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

6. Tambahkan kode berikut dibawah kode
<b:section class='footer' id='footer' showaddelement='yes'/>
atau <b:section class='footer' id='footer' />

Catatan:
Jika anda tidak menemukan kode
<b:section class='footer' id='footer' showaddelement='yes'/>maka tambahkan saja kode berikut dibawah <div id='footer'>


Jika ingin membuat footer 2 kolom. Gunakan kode berikut:

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

Membuat footer 3 kolom. Gunakan kode berikut:


    <div id='footer-column-divide'>

    <div id='footer1' style='width: 33%; 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: 33%; 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: 33%; 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>

Membuat footer menjadi 4 kolom. Gunakan kode berikut:

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

7. Kalau sudah klik Save Template. Lalu klik Page Element. Jika berhasil maka hasilnya akan menjadi seperti ini.

Footer 2 kolom

footer 2 kolom
Footer 3 kolom

footer 3 kolom
Footer 4 kolom

footer 4 kolom

Selamat mencoba... Sumber : Watching Info & http://www.hermanblog.com/2009/03/cara-membuat-footer-multi-kolom.html

Rating: 5



Anda sedang membaca artikel tentang Cara Membuat Footer Multi Kolom dan anda bisa menemukan artikel Cara Membuat Footer Multi Kolom ini dengan url https://watchinginfo.blogspot.com/2012/03/cara-membuat-footer-multi-kolom.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Footer Multi Kolom ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Cara Membuat Footer Multi Kolom sumbernya.

{ 1 komentar... read them below or add one }

tipstrick mengatakan...

thanks gan,,
sudah sukses saya apply kan..

Poskan Komentar

Blog Ini Bersifat Do Follow yg Berarti dpt Memberikan Backlink Gratis Kpd Blog Anda Jika Berkomentar Dibawah ini :

"Komentar Harus Bersifat Membangun Dan Tidak Menjatuhkan akan Kami Hargai"