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

Anda merasakan ada yang berubah di blog saya? Tentu saja dua kolom dibawah kolom posting seperti gambar diatas.

Ada yang bilang kepada saya "... lebih baik template default ini diganti dengan yang lain? biar keliatan profesional ...". Sebenarnya saya ingin mengganti template ini, tetapi males, ribet gantinya. Meskipun sekarang telah ada fitur pertahankan widget, tetap aja males. Lagipula siapa bilang template default Blogger nggak profesional? asal kreatif template Minima dan template default Blogger lainnya bisa jadi profesional. Itu sebabnya saya keukeuh tetap mempertahankan template default ini. Asal tahu saja, blognya Dewi Lestari (http://dee-idea.blogspot.com) yang terkenal itu, masih menggunakan template default Blogger. Lagipula, asal kita kreatif, hal yang biasa bisa jadi luar biasa.

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!

Apabila anda menyukai postingan ini, anda bisa men-sharenya ke yang lain. Semisal ke Facebook atau Twitter. Silakan klik salah satu pilihan dibawah.

Artikel Menarik Lainnya