Indo-pages®: Menambah Sidebar Pada Blog

Cara enambah kolom sidebar.
Begitu blog anda sudah banyak widget di sidebar, 1 kolom mungkin mulai terasa kurang memadai. Mau ganti template rasanya sayang, karena desain tampilannya mungkin sudah oke. Nah bisakah kita menambah kolom sidebar tanpa harus ganti template? Jawabannya adalah bisa! Tapi sebelumnya anda harus melakukan beberapa hal.

Pertama menambah lebar blog anda. Karena penambahan kolom membutuhkan ruang. Kedua menambah lebar header. Jika tidak nanti bentuknya bisa menjadi lucu. Sebagai contoh anggaplah beberapa ukuran template anda seperti di bawah ini:

Lebar header anda sekarang (header-wrapper): 700px

lebar blog anda sekarang (outer wrapper): 700px

lebar halaman posting (main wrapper): 500px
lebar sidebar (sidebar-wrapper): 200px

Nah, bila lebar halaman posting dijumlahkan dengan lebar kolom sidebar maka jumlahnya harus sama dengan lebar blog. Kalau dijadikan rumus lebih kurang bisa ditulis seperti ini: posting + sidebar = lebar blog. Sebagai contoh: (posting 500px)+(sidebar 200px)=(lebar blog 700px). Ini baru satu kolom sidebar. JIka kolom sidebarnya ditambah maka contoh rumusnya bisa menjadi seperti ini: (posting 500px)+(sidebar-satu 200px)+(sidebar-dua 200px)=(lebar blog 900px). Sekarang berapa lebar kolom sidebar yang akan anda tambahkan? Tarohlah juga 200px. Maka lebar blog anda harus dijadikan 900px. Jika tidak, nanti template anda bisa berantakan, karena tidak muat Tapi anda tidak usah bingung. Jika belum tau cara manambah lebar blog bisa anda lihat Kunci Merubah Ukuran Blog. Khusus untuk lebar header bisa dilakukan menyusul. Caranya nanti bisa dilihat pada Merubah Ukuran Header.

Jika lebar blognya sudah anda tambah, sekarang anda bisa lanjutkan dengan langkah-langkah berikut:

1. Masuklah ke halaman Dasbor blog anda lalu klik Rancangan.

2. Kemudian klik pada Edit HTML.

3. Untuk berjaga-jaga jika terjadi kesalahan sebaiknya backup dulu template anda dengan mengklik Download Template Lengkap.

4. Centanglah Expand Template Widget.

5. Kemudian carilah kode: #sidebar-wrapper

6. Agar lebih mudah mencarinya tekan (Ctrl + F) pada keyboard lalu tekan Enter. Maka akan muncul kotak Find. Ketiklah kode yang akan dicari pada kotak tersebut lalu tekan Enter, maka secara otomatis akan muncul kode yang dicari dalam keadaan terseleksi dengan warna hijau.

7. Kemudian perhatikanlah beberapa baris kode pengiring di bawahnya, sampai pada tanda kurung penutupnya, seperti tampak pada gambar di bawah 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 */
}

8. Anda tidak usah bingung jika semua kode di bawahnya tidak sama dengan yang anda temukan pada blog anda. Karena itu tergantung pada jenis dan pengaturan template yang anda digunakan.

9. Sekarang copylah semua kode tersebut dan letakkan di bawah kode yang tadi. Dengan catatan tambahkan sedikit identitas pembeda pada judulnya: misalnya sidebar-second, sidebar-kedua, dan sebagainya. Ini hanya sekedar untuk pembeda. Pada contoh ini saya menggunakan sidebar2, sehingga keduanya akan tampak seperti ini:

#sidebar-wrapper {

# sidebar2-wrapper {

11. Scrollah ke bawah sehingga terlihat satu paket kode pengiringnya. Anda tidak usah bingung jika kode di bawahnya tidak sama dengan template blog anda. Panjang kode terwsebut tergantung pada jumlah widget sidebar yang telah ditambahkan pada blog anda. Yang penting diperhatikan adalah sampai tag penutupnya, yaitu sampai kode   </div>

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
<b:widget id='BlogArchive1' locked='false' title='Artikel' type='BlogArchive'/>
<b:widget id='Feed1' locked='false' title='Headlines' type='Feed'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
      </div>

12. Nah, sekarang copy dan letakkanlah kode di bawah ini tepat di bawah tag penutup tersebut (yaitu dibawah kode (</div>):

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

13. Setelah di copy hasilnya akan menjadi seperti ini:

<div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Image1' locked='false' title='' type='Image'/>
<b:widget id='BlogArchive1' locked='false' title='Artikel' type='BlogArchive'/>
<b:widget id='Feed1' locked='false' title='Headlines' type='Feed'/>
<b:widget id='HTML3' locked='false' title='' type='HTML'/>
<b:widget id='LinkList1' locked='false' title='Links' type='LinkList'/>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='HTML2' locked='false' title='' type='HTML'/>
</b:section>
      </div>

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

14. Sekarang tinggal tahap akhir. Kita pindah ke halaman lain, kliklah Elemen Laman.

15. Nah, pada contoh ini tampak satu kolom sidebar sudah ditambahkan. Hanya saja widgetnya masih kosong.

16. Jika anda ingin bukti, cobalah lihat blog anda. Pada contoh ini tampak sudah ada ruang kosong antara halaman posting dan sidebar kanan.

17. Agar area kosong itu ada isinya, tambahkanlah widget pada kolom sidebar yang baru saja anda buat. Atau sekedar untuk mengujinya, draglah salah satu widget yang ada pada sidebar kanan.