Menambahkan 3 Kolom Di Bawah Sidebar

Hasil dari cara yang tertulis pada halaman ini adalah sidebar yang terdiri dari 4 buah kolom. Yaitu 1 kolom paling atas, dua kolom ditengah dan satu kolom dibawah ketiga kolom tersebut. Dimana lebar kolom sidebar paling atas adalah sama dengan lebar kolom sidebar paling bawah.
Berikut ini adalah langkah-langkah untuk membuat sidebar dengan model tersebut :

A. Langkah I

1. Log in ke akun blogger.

2. Setelah masuk ke akun blogger, kemudian klik menu "Rancangan" atau "Design"

3. Klik "Edit HTML" untuk masuk ke halaman pengeditan kode template.

4. Centang kotak kecil yang berada di sebelah kiri kalimat "Expand template widget" kemudian back up (copy paste) seluruh kode template di notepad. Untuk berjaga-jaga jika terjadi kesalahan dalam pengeditan kode template.

5. Temukan kode berikut ini atau kode yang mirip dengan kode berikut ini di dalam text-area kode html blog :


#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

6. Letakkan kode bberikut ini tepat dibawah kode tersebut :

#middle1 {
width: 50%startSide;
word-wrap: break-word;
overflow: hidden;
}
#middle2 {
width: 50%;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#bottom-side {
width: 100%;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Langkah I telah selessai. Selanjutnya ikuti langkah berikut ini.


B. Langkah II

1. Temukan kode berikut ini atau yang mirip dengan kode berikut ini:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>

2. Letakkan kode berikut ini tepat diantara kode </b:section> dan kode </div> sesuai yang ditunjukkan di atas :

<b:section class='sidebar' id='midlle1' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='middle2' preferred='yes' showaddelement='yes'>
</b:section>
<b:section class='sidebar' id='bottom-side' preferred='yes' showaddelement='yes'>
</b:section>

3. Simpan template dan lihat hasilnya pada halaman "Page Element" atau "Elemen Laman"

4. Selesai!

Jika ada yang kurang jelas, jangan ragu untuk menyampaikannya.
Terima kasih..
Semoga bermanfaat..