Membuat 2 coloumn sidebar

Sudah lama su tidak updatekan blog ini.Ramai yang bertanya kemana menghilangnya su.Almaklumlah sibuk belajar bagaimana membuat burn cd kerana anak2 ingin cerita2 yang ada didalam youtube dapat dilihat di dvd player.So hari ini rindu rasanya untuk updatekan blog ini.kadang-kadang lucu jugak kerana ramai yang menyangka tuan punya blog ini adalah lelaki..Sebenarnya saya adalah seorang perempuan dimana bergelar wanita,isteri dan juga ibu kpd 2 cahayamata.Azmas itu adalah gabungan nama saya dan suami iaitu Azad & Mastika.So salam perkenalan kepada semua yang berkunjung di blog ini.

Tanpa membuang masa,hari ini su nak ajar cara bagaimana membuat 2 coloumn sidebar pada blog kita.Mula-mula macam biasalah kita:-

1.Login ke blog korang
2.Pergi ke Layout
3.Kemudian cari kod dibawah dan copy

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

*width saya kemungkinan tidak sama seperti width korang.Ia bergantung pada width yang ada pada sesuatu blog.

Jika pada kod diatas width-nya adalah 220px.

Jadi jumlah width sidebar yang pertama hendaklah dibagi 2. contohnya spt ini :-

220px : 2 = 110px.

Tetapi kita perlu membuat jarak antara sidebar yang ke-1 dengan yang ke-2 supaya tidak berdekatan. So macam mana caranya??
Sebelum width tersebut dibahagi 2, kurangkan dulu mengikut jarak yang di inginkan.
Misalnya saya ingin memberi jarak antara satu sama lain adalah 20px maka lebar sidebar yang ke-1 akan menjadi 220px - 20px dan hasilnya 200px.
Jadi 200px inilah yang akan dibahagi dengan 2 sehingga
lebar masing - masing sidebar menjadi 100px.


4.Kemudian letakkan kod yang telah dicopy tadi dibawahnya menjadi seperti ini.gantikan kod #sidebar-wrapper { dengan kod #sidebar2-wrapper {


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

#sidebar2-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

5.Seterusnya, ubah width (lebar) masing - masing sidebar menjadi 100px. Sehingga hasilnya menjadi seperti ini :


#sidebar-wrapper {
width: 100px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#sidebar2-wrapper {
width: 100px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

6.Kemudian tambahkan jarak antara 2 kolom sidebar tersebut.
Menjadi seperti ini:-


#sidebar-wrapper {
width: 100px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#sidebar2-wrapper {
width: 100px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
margin-right: 20px;
}

7.Kemudian cari kod:-

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive2' locked='false' title='Blog Percubaan' type='BlogArchive'/>
<b:widget id='Profile2' locked='false' title='Mengenai Saya' type='Profile'/>
</b:section>
</div>

Selepas itu,copy paste text yang berwarna biru di bawah kod html tersebut. Kemudian ubah type id-nya menjadi sidebar2 menjadi seperti ini:-


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

8.Akhir sekali jangan lupa save.Pastikan korang sudah membuat backup dahulu template korang sebelum korang membuat sebarang perubahan kerana khuatir tidak menjadi.

Luangkanlah sedikit masa korang untuk memberi komen di blog ini kerana setiap komen yang dibuat oleh korang amat bermakna dan secara tidak langsung ianya memberi suntikan semangat untuk saya terus menulis di blog ini...