Cara Membuat Dua Kolom dibawah Kolom Posting (Plus Tambah Gadget)

Ok, back to topic. Kita bahas lagi cara membuat dua kolom dibawah postingan. Ini bisa jadi alternatif multi kolom yang tempo hari pernah saya bahas. Ok. Tertarik membuatnya? Ikuti langkah-langkah berikut ini.

1. Login ke Blogger, lalu klik menu Tata Letak > Edit HTML.
2. Silakan backup template anda.
3. Taruh kode ini diatas kode ]]></b:skin>

#doublecolumnleft, #doublecolumnright{

height:auto;

width:205px;

padding:10px;

background:#81F781;

color:#000000;

}

#doublecolumnleft h2, #doublecolumnright h2{

font-size:large;

font-weight:bold;

#doublecolumnright h2{

text-align:right;

}

#doublecolumnleft a, #doublecolumnright a{

color:#0A2A0A; text-decoration:underline;

}

#doublecolumnleft a:hover, #doublecolumnright a:hover{

text-decoration:none;

}

#doublecolumnleft{

float:left;

}

#doublecolumnright{

float:right;

text-align:right

}

Ket: bagian 205px adalah lebar dari masing-masing kolom. Sesuaikan dengan lebar main wrapper anda.



4. Cari bagian main wrapper (kolom posting) anda. Misalkan punya saya:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>

<b:widget id='HTML16' locked='false' title='' type='HTML'/>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section>

</div>

5. Lalu sebelum kode </div>, ketikkan kode berikut.

<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>

<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>

Sehingga menjadi:

<div id='main-wrapper'>

<b:section class='main' id='main' showaddelement='no'>

<b:widget id='HTML4' locked='false' title='Kotak Pencarian' type='HTML'/>

<b:widget id='HTML16' locked='false' title='' type='HTML'/>

<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>

</b:section>

<b:section class='dblcolumn' id='dblcolumnleft' preferred='yes'/>

<b:section class='dblcolumn' id='dblcolumnright' preferred='yes'/>

</div>

7. Simpan.



8. Beralih ke tab Elemen Halaman, anda akan menemukan link Tambah Gadget dibawah kolom posting. Klik link tersebut untuk menambah widget, semisal recent posts atau recent comments.

Berhasil? Selamat! Gagal? Coba lagi! Semoga bermanfaat!