Mengubah Template Blogger 2 Column Menjadi 3 Column


Sebelum mengubah template blogger dari 2 column menjadi 3 column, tentu ukuran lebar blog harus ditambah agar bisa muat untuk 2 buah sidebar. Begitu juga template yang berbeda membutuhkan pengeditan yang berbeda pula.

Dalam tutorial ini saya menggunakan template standard Minima dari Blogger.

Lihat cara mengubah ukuran column Blogger
.

Nah, setelah anda berhasil merubah ukuran column, sekarang saatnya menambah sidebar agar template Blogger menjadi 3 column.

Ini adalah blog korban yang diubah dari 2 column menjadi 3 column.

Blog 3 column
Ingat berapa ukuran column yang anda tambahkan pada lebar template Blogger. Pada contoh ini, lebar blog ditambah 300 pixel sehingga berarti ada 300 pixel ruang yang kosong. Ruang kosong sebesar 300 pixel inilah yang akan kita isi dengan sidebar baru.

Pada tab Layout => Edit HTML, cari baris kode berikut:

#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 */
}

Copy kode tersebut dan paste tepat di bawahnya, menjadi seperti ini:

#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 */
}

#sidebar-wrapper2 {
width: 300px;
float: $startSide;
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 */
}

Perhatikan tulisan yg berwarna merah. Itu perbedaan antara sidebar yg pertama dengan sidebar yg akan kita tambahkan.

Sekarang cari kode berikut:

<div id='sidebar-wrapper'>

Paste kode warna merah di bawah ini, tepat di atas kode tadi.

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

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

Nah selesai. Anda telah berhasil mengubah template Blogger 2 column menjadi 3 column.
Share: