senantiasa belajar: Cara menambah Kolom Sidebar Blog

Untitled Document

Anda Sudah Mulai Merasa Sempit karena banyaknya sidebar di blogg anda???Nah bisakah kita menambah kolom sidebar tanpa harus ganti template? Jawabannya adalah bisa! Tapi sebelumnya anda harus melakukan beberapa hal.

Pertama -Tama Kita menambah lebar blog anda. Karena penambahan kolom membutuhkan ruang. Kedua menambah lebar header. Jika tidak nanti bentuknya bisa menjadi Aneh Atau Acak acakan. 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,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:

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

10. Sekarang carilah kode: <div id='sidebar-wrapper'>

Gunakan Ctrl + F untuk memudahkan pencarian.

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>

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

13. Setelah di copy hasilnya akan menjadi seperti ini:

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.

18. Jika sudah kliklah SIMPAN TEMPLATE dan tunggu hingga proses selesai.

selamat mencoba

Thursday, September 1, 2011

Cara menambah Kolom Sidebar Blog

No comments:

Post a Comment

Stats