Tutorial menambah sidebar di bahagian kanan blog

Tutorial kali ini adalah menjadikan template 2 kolum kepada 3 kolum untuk beginner. ni pun sebab semalam aku buatkan template tuk blog Aredhel Nargothrond. untuk mengelakkan anda pening aku gunakan template Minima sebagai template asal iaitu dua kolum kepada 3 kolum.

macam biasa sebelum bermula pastikan anda backup dulu template blog anda. untuk mengelakkan perkara yang tidak di ingini berlaku.

XML Editing

1. tanpa perlu tick Expand Widget Templates
   
2. cari coding ini
   

   <div id='sidebar-wrapper'>
   <b:section class='sidebar' id='sidebar' preferred='yes'>
   …
   blah² coding lain…
   …
   </b:section>
   </div>

   
   
3. edit dan tambah coding ini
   

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

   
   
4. itu sahaja untuk XML section. yang paling penting adalah CSS section.
   

CSS Editing

CSS section agak panjang sila ikut betul².

1. cari coding #sidebar-wrapper
   

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

   ubahkan width 220px menjadi 420px.
   
   
2. kemudian duplicate #sidebar-wrapper. namakan #sidebar-kiri dan #sidebar-kanan. editkan supaya jadi macam ini.
   

   #sidebar-wrapper {
   width: 420px;
   float: right;
   word-wrap: break-word;
   overflow: hidden;
   }
   
   #sidebar-kiri {
   width: 200px;
   float: left;
   word-wrap: break-word;
   overflow: hidden;
   }
   
   #sidebar-kanan {
   width: 200px;
   float: right;
   word-wrap: break-word;
   overflow: hidden;
   }

   bagi #sidebar-kiri ubah nilai width kepada 200px dan float kepada left. untuk #sidebar-kanan pulak ubahkan nilai width sahaja menjadi 200px.
   
   
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;
   }

   
   

Selamat mencuba.