Membuat sidebar di sebelah kiri postingan
Tampilan blog ini sebelumnya adalah
seperti terlihat pada gambar dibawah, dengan 4 kolom tambah gadget
tambahan yang berada di bawah dan disamping header.
Ketika ingin membuat kolom sidebar disebelah kiri kolom posting, rupanya
baris kode kolom-kolom tambahan itu membuat proses pembuatannya tidak
semulus yang aku bayangkan ya. Akhirnya aku memulainya dengan membuat
blog lain yang baru dan mengedit baris kodenya sehingga tampilan blog
nya jadi seperti terlihat dibawah ini, mempunyai 2 sidebar disebelah
kiri dan kanan, dan ada 4 kolom tambah gadget di bawah header. Setelah
itu baru (rencananya) jika nanti blog baru telah siap, maka akan di
upload (diunggah) templatenya untuk menjadi tampilan baru blog ini.
Cara untuk membuat sidebar di sebelah kiri kolom posting pada template blogspot ini aku dapatakan dari My Learning Days...
Caranya adalah sebagai berikut:
1. Login ke Blogspot --> layout --> Edit HTML
2. Download template untuk jaga-jaga biar bila ada kesalahan dalam proses edit HTML, bisa dikembalikan lagi ke template awal.
3. Cari baris kode outer-wrapper, lalu rubah ukuran width-nya (lebarnya) sesuai dengan keinginan, dimana outer-wrapper adalah lebar template, main-wrapper adalah lebar kolom posting, dan sidebar-wrapper
adalah lebar kolom sidebar sebelah kanan. Sesuaikan semua lebarnya
dengan kolom tambahan yang akan dibuat nanti, dan juga perkirakan jarak
antar elemen agar jangan sampai ada elemen halaman yang bergeser
kebawah karena adanya salah satu elemen halaman yang ukurannya terlalu
lebar misalnya.
Untuk baris kode kolom sidebar kirinya adalah sebagai berikut:
#newsidebar-wrapper {
width: 140px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
dimana float menunjukan letak side bar di kiri atau dikanan. Tambahkan baris kode diatas seperti terlihat pada gambar:
4. Setelah itu cari baris kode <div id='main-wrapper'>
dan tambahkan baris kode berikut diatasnya:
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/>
</div>
5. Klik tombol simpan template, maka sekarang tampilan template menjadi seperti ini:
6. Seperti terlihat pada gambar di poin 5, ukuran header dan footer
template masih belum berubah. Untuk merubahnya agar sesuai dengan
ukuran lebar template yang baru, maka cari baris kode seperti yang
terlihat pada gambar dan rubah nilai widthnya sesuai dengan lebar
template, atau seusia dengan keinginan.
7. Untuk membuat 4 kolom tambah Gadget dibawah header seperti terlihat pada gambar 2 diatas, caranya bisa lihat di Membuat 1, 2, 3, 4 atau lebih Kolom Tambah Gadget (Add Page Element) di Bawah Header Pada Template Minima Blogspot (bagian 4)
8. Jika ingin sidebarnya dua-duanya ada disebelah kanan, maka pada poin 3, pada baris kode yang ditambahkan (newsidebar-wrapper), nilai float-nya rubah menjadi right.
9. Jika ingin sidebarnya berada disebelah kiri dua-duanya maka, maka rubah float pada sidebar-wrapper menjadi left,
lalu pindahkan baris kode <div id='sidebar-wrapper'> seluruhnya yang semula berada dibawah baris kode <div id='main-wrapper'>, ke atas baris kode <div id='main-wrapper'>, dan klik simpan template
Hasilnya akan menjadi terlihat seperti pada gambar dibawah ini:
Selamat mencoba.
