Membuat Kolom Disebelah Kanan Header

Untuk membuat kolom disebelah kanan header, yang pertama kali harus dilakukan adalah membuat ruang untuk tempat kolom yang akan dibuat. Jadi lebar header yang ada di perkecil agar ada cukup ruang nantinya untuk tempat kolom yang akan dibuat.

Untuk memperkecil ukuran lebar header caranya adalah sebagai berikut:

Login ke Blogspot –> Tata letak –> Edit HTML

Cari baris kode berikut:

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

lalu tambahkan baris kode berikut

float:left;
width:220px;

sehingga baris kodenya nanti akan menjadi seperti terlihat dibawah ini:

#header {
float:left;
width:220px; margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Simpan template.

Catatan:
- float:left; adalah kode yang menyatakan letak header ada di sebelah kiri. Jika ingin headernya berada disebelah kanan, ganti left dangan right.
- width:220px; adalah kode yang menyatakan lebar header, yaitu 220px.

Gb 1. Tampilan header minima sebelum di edit.

header yang diperkecil

Gb 2. Tampilan header minima setelah di edit.

*****

Setelah tersedia cukup ruang untuk membuat kolom baru disamping header, maka sekarang yang harus dibuat adalah definisi dari kolom yang akan dibuat tersebut. Caranya mudah saja, tinggal kopi saja kode yang sudah ada, misalnya dari kode sidebar-wrapper.

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

Beri nama lain pada kode tersebut, misalnya sampingheader. Setelah itu tambahkan kode margin dengan variabel yang sama dengan margin pada header agar letak kolom yang dibuat nantinya akan sejajar dengan kolom header. Ukuran lebar kolom yang akan dibuat sesuaikan dengan kebutuhan, misalnya kalau untuk menaruh banner maka sebaiknya ukuran lebar kolomnya (width) adalah 480px.

#sampingheader {
width: 480px;
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 */
margin: 5px;
}

Setelah itu cari baris kode <div id='header-wrapper'>

Tambahkan baris kode berikut didalam baris kode diatas

<b:section class='header' id='sampingheader' preferred='yes'>
</b:section>

setelah baris kode </b:section> dan sebelum </div> sehingga baris kodenya akan terlihat seperti berikut:

Simpan template. Sekarang sudah ada kolom disamping kanan header yang bisa digunakan untuk menaruh banner atau lainnya.

header dengan 2 kolom b

Gb 3. Tampilan header minima dengan 2 kolom header.

Untuk membuatnya lebih menyatu, garis pinggir pada header dapat dihilangkan. Dan agar membuatnya menjadi lebih menarik, dapat dibuat garis pinggir disekeliling blog dan merubah warna penampilan pada latar belakang halaman blog.

tampilan header 2 kolom

Gb 4. Tampilan header minima dengan 2 kolom header dan tanpa garis pinggir pada header.

Catatan:
- Kadang tampilan kolom yang dibuat pada menu Elemen Laman akan terlihat seperti gambar dibawah ini:

header dengan 2 kolom

Hal ini tidak mengapa ya, karena tampilan pada blognya tetap terlihat seperti pada gambar 3 atau 4. Setelah beberapa waktu, biasanya tampilannya baru akan terlihat seperti gambar dibawah ini:

tampilan header 2 kolom pada menu elemen laman

tampilan header 2 kolom pada menu elemen laman

- Untuk memudahkan pencarian baris kode, gunakan 'kotak pencari', tekan Ctrl + F, lalu ketikan baris kode yang dicari dan tekan enter. Browser yang digunakan disini adalah Internet Explorer (IE). Untuk browser lain, 'kotak pencari' letaknya sedikit berbeda

edit header