Cara Membuat Footer Multi Kolom Fleksibel

Bagi anda yang kesulitan dan ingin memperbanyak ruang kolom pada bagian footer template anda dengan cara yang fleksibel tanpa harus menemukan kode seperti berikut:

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

Dan bukan itu saja, anda pun dapat dengan mudah menambahkan berapa banyak kolom yang dikehendaki dan ini tidak hanya berlaku untuk penambahan kolom di bagian footer saja, tapi juga dapat digunakan sekehendak anda, dimana pun anda mau menambahkan kolom tersebut. Bisa untuk menambahkan satu kolom atau beberapa kolom di atas postingan atau di bawah dan di atas header, dan bisa juga di sisi kiri dan kanan postingan. Resep ini saya dapat dari herman blog dan ini semua sudah saya praktekan dan hasilnya cukup memuaskan, bagaimana ! Ok langsung aja kita mulai: :)

Login ke Blogger. Klik Design -> Edit HTML. Backup template anda dengan klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika hasilnya tidak memuaskan.

Kalau sudah, cari kode ]]></b:skin> kalau sudah ketemu, tambahkan kode dibawah ini diatas kode ]]></b:skin>

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

pemberian nama variabel "#foorter-column-divide", dapat anda ubah sesuai kehendak anda. Di sini pemberian nama variabel footer untuk menjelaskan bahwa kita akan membuat dan menambahkan satu kolom atau beberapa kolom di bagian footer. Begitu juga untuk pemberian nama variabel ".footer-column"

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>

Hasilnya seperti gambar di bawah ini:

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>

Hasilnya seperti gambar di bawah ini:

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>

Hasilnya seperti gambar dibawah ini:

Gimana, ngerti apa bingung. Kalau masih bingung bisa tanyakan langsung melalui kotak komentar di bawah ini. Saya akan menjawabnya, terima kasih.

Share :

Tweet

More

Related Post

• Cara Membuat dan Memasang Sticky Widget Pada Sidebar Pada blogger tips yang lalu telah dibahas bagaimana cara membuat dan memasang sticky widget pada M
• Cara Membuat Widget Friend Connect BloggerFreind conncect blogger yang merupakan bawaan dari draft blogsot kini sudah lama ditinggalkan dan b
• Memasang Komentar Facebook Di Halaman Statis Pada postingan yang lalu Cara Buat Komentar Facebook Di Blog, itu hanya tampil pada halaman dinami
• Cara Buat Komentar Facebook Di Blog Kini lagi trend mencantumkan komentar facebook di blog. Dari hasil googling saya tentang cara buat