merubah sidebar menjadi dua kolom

Sidebar adalah bagian samping kanan atau kiri blog yang bisa anda tambahkan gadget...jika anda ingin membagi sidebar anda menjadi beberapa kolom-kolom kecil/menambahkan kolom sidebar menjadi 2 bagian di tengah sedangkan di atas dan bawahnya satu bagian, sehingga anda bisa add gadget yang lebih lagi berikut ini adalah caranya.
contoh sidebar yang saya maksud dapat anda lihat pada bagian samping kanan blog ini.
Berikut ini adalah catatan mengenai cara membagi sidebar template minima blogger menjadi dua kolom.

A. Langkah I

1. Log in ke akun blogger.

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

3. Klik "Page Element" atau "Elemen Laman" dan back-up semua gadget / widget sidebar yang perlu di back-up.

4. Klik "Edit HTML" untuk masuk ke halaman pengeditan kode template (setelah back-up selesai).

5. 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.

6. Copy semua kode berikut ini :

#sidebar-wrapper{
width:220px;
float:right;
word-wrap:break-word;
overflow:hidden;
}

#left-side{
width:50%;
float:left;
word-wrap:break-word;
overflow:hidden;
}

#right-side{
width:50%;
float:right;
word-wrap:break-word;
overflow:hidden;
}

7. Temukan kode berikut ini atau yang mirip dengan kode berikut ini dan ganti dengan kode diatas :

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

Langkah I selesai. Sekarang lakukanlah langkah-langkah berikut ini untuk menyempurnakannya.

B. Langkah II

1. Hilangkan tanda centang pada kotak yang ada disebelah kiri kalimat "Expand template widget". Hal ini dilakukan agar tidak terlalu rumit.

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

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

3. Ganti semua kode diatas dengan kode berikut ini:

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

4. Klik "Simpan" atau "Save" setelah hasilnya sesuai yang diinginkan.
5. Klik "Page Element" atau "Elemen Laman" untuk melihat hasilnya.

6. Selesai.

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 !!!