dillablog: Cara Membuat dan Menambahkan Kolom Di Blog

Dari judulnya "Cara Membuat dan Menambah Kolom di Blog", sepintas terlihat sangat umum dan tidak pada substansinya. Ya!, memang maksudnya seperti itu, karena Cara Membuat dan Menambah Kolom di Blog ini sangat fleksibel. Artinya dapat digunakan untuk penambahan kolom di atas postingan maupun di bawah postingan bahkan di sisi kanan atau di sisi kiri postingan. Jadi sangat fleksibel bukan.!

Mau tau caranya Membuat dan Menambahkan Kolom Di Blog yang fleksibel, ok ikuti saja langkah-langkahnya berikut ini :

Login dulu 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>
Tambahkan kode dibawah ini diatas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
di sini anda bisa menambahkan rinciannya lagi misalnya: frame, jenis dan ukuran font, dan apa saja yang menurut anda dibutuhkan untuk kelengkapannya.
Jika sudah cari kode dibawah ini. Di sini saya beri contoh untuk membuat dan menambah kolom footer.

<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>
Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/>
atau <b:section class='footer' id='footer' />, lalu disimpan dan selesai untuk membuat dan menambah kolom footer.

Catatan: Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>. Di sinilah letak fleksibelnya Cara Membuat dan Menambahkan Kolom Di Blog yang saya maksud.

Jika ingin membuat footer 1 kolom. Gunakan kode berikut:

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

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