menambahkan 3 kolom lagi di bawah sidebar

Kalau pada artikel sebelum ini di katakan menambahkan 2 kolom lagi di bawah sidebar
kali ini kita coba yang lebih lagi yaitu menambahkan 3 kolom lagi di bawah sidebar.
sebenarya untuk apa sih banyak-banyak kolom add gadget/tambah gadget ?
banyak fungsi dan keuntungan jika anda punya banyak kolom gadget,seperti menambahkan berbagai aksesoris kecil misalnya alexa gadget,histats,jam dan lain-lain.juga bila blog anda punya iklan ukuran kecil misalnya 125 x 125 bisa anda tempatkan satu persatu pada kolom add gadget anda.
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 silahkan tanyakan pada buku tamu,kotak komentar ataupun melalui kontak saya
Terima kasih..
Semoga bermanfaat..


Sobat perlu baca yang ini juga:

1 komentar:

  • dion

    belum ada komentar, silahkan tambahkan komentar atau pertanyaan anda.

    jawab
  • Posting Komentar

    silahkan tinggalkan pesan !!!