Nah..kalo
sekiranya lebar kolom sidebar blog anda sudah cukup, maka saatnya untuk
membagi 2 kolom sidebar tersebut. Silahkan simak langkah - langkahnya :
1. Proses editing kode css
Setelah
login di blogger, langsung masuk ke menu edit html dan tidak usah kasih
tanda centang pada kolom expand template widget. Selanjutnya, cari kode
css seperti ini :
#sidebar-wrapper {
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
tidak harus sama sih, intinya cari kode css untuk membuat sidebar. Jika pada kode diatas yaitu #sidebar-wrapper
. Kemudian liat berapa jumlah width-nya, jika pada kode diatas width-nya adalah 190px.
Nah..logikanya
jika ingin di bagi 2, maka jumlah width sidebar yang pertama harus
dibagi 2. Misal..pada kode di atas width-nya 190px. Maka untuk
membaginya tinggal 190px : 2 sehingga lebar masing - masing kolom
sidebar adalah 95px. Memang betul, tapi ingat kita harus ngasih jarak
antara sidebar yang ke-1 dengan yang ke-2 supaya tidak berdempetan.
Bagaimana caranya..?! sebelum membagi 2, kurangi dulu sesuai dengan
jarak yang di inginkan. Misal...saya mau kasih jaraknya 20px, maka
lebar sidebar yang ke-1 menjadi 190px - 20px dan hasilnya 170px.
Nah..baru setelah itu dibagi 2, sehingga lebar masing - masing sidebar
menjadi 85px.
Setelah kita menentukan lebar masing - masing
sidebar, selanjutnya tinggal mendeklarasikannya di kode css.
caranya....copy paste kode sidebar yang pertama menjadi 2 dan ubah
namanya menjadi #sidebar2-wrapper
. Misal..untuk kode diatas menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper {
--> kode sidebar 2 (hasil copy paste)
width: 190px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Selanjutnya,
ubah width (lebar) masing - masing sidebar seperti yang telah dibahas
tadi menjadi 75px. Sehingga hasilnya menjadi seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper {
--> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
Langkah
yang terakhir untuk proses editting kode css yaitu menambahkan jarak
antara 2 kolom sidebar tersebut. Caranya, tambahkan di kode css #sidebar2-wrapper
berupa perintah untuk pendeklarasian jarak, yaitu margin. Sehingga hasilnya seperti ini :
#sidebar-wrapper { --> kode sidebar awal
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar2-wrapper {
--> kode sidebar 2 (hasil copy paste)
width: 75px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
margin-right: 20px;
}
2. Aplikasi di kode html
Nah..untuk
proses editting kode css sudah selesai. Kemudian saatnya untuk
mengaplikasikan kode css tersebut di kode html blog. caranya..cari kode
html seperti ini dan fokuskan pad text yang berwarna hijau saja. Karena untuk yang berwarna merah tiap template pasti berbeda:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
Jika sudah ketemu, copy paste text yang berwarna hijau di bawah kode html tersebut. Kemudian rubah type id-nya menjadi sidebar2. Maka hasilnya :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Awas..jangan sampe salah. Jika sudah selesai silahkan klik dulu pratinjau / preview. Apabila hasilnya sudah bagus baru di save. Tapi...apabila masih ada error atau kesalahan, klik bersihkan edit / clear edit, kemudian ulangi langkahnya dari awal.
Waduh..cape
juga ya ngetik banyak gini. Yaa..mudah2an bisa dimengerti dan tidak ada
kesalahan dalam aplikasinya. Jika ada pertanyaan, silahkan bertanya di
kolom komentar ya...
sumber : http://kursus-blog.blogspot.com/2008/12/cara-membagi-2-kolom-sidebar-blog.html