Membagi Crosscol

Ada penjelasan yang cukup menarik ketika berkunjung ke tempat Mas AiresOfwar^[1]. Beliau menjelaskan mengenai Crosscol^[2]. Menurut beliau, crosscol dapat pula di bagi menjadi dua atau tiga bagian lagi sesuai keinginan.

Nah, sekarang kita coba membagi dua tempat nangkring widget ini. Seperti pada gambar ini:

Sesuai penjelasan Mas AiresOfwar, cara membagi crosscol sebagai berikut:
1. Kosongkan dahulu crosscol yang akan di bagi menjadi dua.
2. Masuk ke halaman Edit HTML dan back up dahulu template aslinya.
3. Cari kata crosscol. Biar cepat, tekan CTRL+F^[3] dan ketik kata crosscol pada kolom pencarian.
4. Temukan kode crosscol di bawah ini:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-overflow' showaddelement='no'/>

Jika ada tambahan dari kode diatas, berarti masih terdapat widget didalamnya dan harus dipindahkan dahulu pada tempat yang lain.

5. Ganti kode yang berwarna biru di atas dengan kode berikut:

<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>

Jika telah selesai, hasilnya akan menjadi seperti berikut:

<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>

6. Cari kode ]]></b:skin> dan letakkan kode berikut ini tepat diatasnya. Hal ini tergantung dari template yang digunakan.

a. Untuk template lama:

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}
body#layout #crosscol-left {width: 50%; float: left;}
body#layout #crosscol-right {width: 50%; float: right;}

b. Untuk template baru:

#crosscol-left {width:40%;display:inline-block;_float:left;}
#crosscol-right {width:40%;display:inline-block;float:right;padding: 15px}
#crosscol-right .widget {margin:0;}

Khusus untuk template baru ada tambahan sedikit, cari kode ]]</b:template-skin> dan letakkan kode berikut ini tepat di atasnya.

#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}

7. Save dan lihat hasilnya, jika langkahnya sudah benar tidak akan ada pesan error.
Selamat mencoba...

Catatan:
^[1] Seorang penulis dan pemilik blog Tweak My Blogger
^[2] Tempat meletakkan widget pada blogspot.
^[3] Shorcut yang digunakan pada browser untuk melakukan pencarian.

Kembali ke atas

Sumber: Tweak My Blogger