Tutorial menambah sidebar di bahagian kiri blog

Dah banyak tutorial pasal nak buat 3 kolum ni kat blog² yang aku lawat. kesimpulan yang aku boleh buat adalah ramai org sukakan 3 kolum blog. tapi aku tak suka, aku lagi prefer 2 kolum, kalo 3 kolum pun aku suka dua² sidebar kat belah kanan. Hari ni aku nak buat tutorial edit blog dari dua kolum jadi 3 kolum. siderbarnya berada kiri dan kanan.

macam biasa aku gunakan template Minima sebagai contoh dan macam biasa jugak backup template dulu sebelum edit.

XML Editing

1. cari code ini
   

   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   </div>

   
   
   
2. kemudian addkan code ini sebelum code di atas.
   

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

   
   
   
3. kemudian edit code selepas code no.1 kat atas jadi
   

   <div id='sidebar-wrapper-kanan'>
   <b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
   …
   coding bnyak² bla… bla…
   …
   </b:section>
   </div>

   
   
   
4. akhirnya jadi
   

   <div id='sidebar-wrapper-kiri'>
   <b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
   </b:section>
   </div>
   
   <div id='main-wrapper'>
   <b:section class='main' id='main' showaddelement='no'>
   <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
   </b:section>
   </div>
   
   <div id='sidebar-wrapper-kanan'>
   <b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
   …
   coding bnyak² bla… bla…
   …
   </b:section>
   </div>

   
   
   
5. siap XML editing.
   

CSS Editing

1. cari #sidebar-wrapper tuka namajadi #sidebar-wrapper-kiri pastu tuka width jadi 200px dan float jadi $startSide.
   

   #sidebar-wrapper-kiri {
   width: 200px;
   float: $startSide;
   word-wrap: break-word;
   overflow: hidden;
   }

   
   
   
2. duplicate #sidebar-wrapper-kiri dan namakan #sidebar-wrapper-kanan pastu tuka width jadi 200px.
   

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

   
   
   
3. sekarang sidebar anda sudah siap. tetapi bila kita dah buat sedikit perubahan. perubahan ini akan ganggu CSS definition yang lain. so, kita kena buat sedikit penyesuaian supaya template kita nampak cantik.
   
   lebar saiz kolum blog anda pun sudah berubah kerana ada pertambahan kolum. jadi menyesuaikan perubahan yang telah dibuat kita kena adjust lebar kolum yang lain.
   
   
4. keseluruhan lebar blog sudah berubah jadi tukar lebar tersebut. cari #outer-wrapper kemudian tukar width jadi 950px
   

   #outer-wrapper {
   width: 950px;
   margin:0 auto;
   padding:10px;
   text-align:$startSide;
   font: $bodyfont;
   }

   
   
   
5. kedua header. cari #header-wrapper kemudian tukar width jadi 950px
   

   #header-wrapper {
   width:950px;
   margin:0 auto 10px;
   border:1px solid $bordercolor;
   }

   
   
   
6. ketiga main post. disebabkan saiz sidebar dah bertambah maka kita kena tambahkan juga saiz main post jadi besar sikit tuk balancekan dengan sidebar kita. cari #main-wrapper kemudian tukar width jadi 510px.
   

   #main-wrapper {
   width: 510px;
   float: left;
   word-wrap: break-word;
   overflow: hidden;
   }

   
   
   
7. keempat footer. sama jugak cari #footer kemudian tukar nilai width jadi 950px jugak.
   

   #footer {
   width:950px;
   clear:both;
   margin:0 auto;
   padding-top:15px;
   line-height: 1.6em;
   text-transform:uppercase;
   letter-spacing:.1em;
   text-align: center;
   }

   
   

nanti² aku buat tutorial add sidebar belah kanan pulak..

selamat mencuba.