Cara Membagi Kolom Sidebar Blog menjadi 2

Salam Sahabat...

Sebelum sahabat menerapkan pembagian Sidebar menjadi 2 kolom, sahabat terlebih dahulu harus membaca post saya mengenai "memperlebar halaman blog". Setelah sahabat memperlebar halaman blog maka dapat menerapkan pembagian sidebar.

Saya beranggapan posisi sahabat sudah ada di EDIT HTML

• tidak usah memberikan tanda centang pada kolom expand template widget karena hanya akan membingungkan saja
• save dulu kode HTML sahabat.
• 
  
  
  
  cari kode di bawah ini :   gunakan CNTRL + F untuk memudahkan
  
  
  
  
  [  #sidebar-wrapper {
     width: 400px;
     float: $endSide;
     word-wrap: break-word;
     overflow: hidden;
     }                    ]
  
  
    Jika pada kode diatas yaitu #sidebar-wrapper. Kemudian liat berapa jumlah width-nya, jika pada kode diatas width-nya adalah 400px[karena di blog saya menggunakan sebesar itu].
  
  
  
  
  
  
• Mari bermain dengan logika, tidak perlu berpikir yang berat, logikanya jika ingin di bagi 2, maka jumlah width sidebar yang pertama harus dibagi 2. Misalnya..pada kode di atas width-nya 190px. Maka untuk membaginya tinggal 400px : 2 sehingga lebar masing - masing kolom sidebar adalah 200px. 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. Misalnya...sahabat mau kasih jaraknya 20px tapi saya sarankan 10px saja sudah cukup. So sepakat jarak yang dipake 10px. Maka lebar sidebar yang ke-1 menjadi 400px - 100px dan hasilnya 390px. Baru setelah itu dibagi 2, sehingga lebar masing - masing sidebar menjadi 195px.
• Setelah 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: 400px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  }
  
  #sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
  width: 400px;
  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: 195px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  }
  
  #sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
  width: 195px;
  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: 195px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  }
  
  #sidebar2-wrapper { --> kode sidebar 2 (hasil copy paste)
  width: 195px;
  float: $endSide;
  word-wrap: break-word;
  overflow: hidden;
  margin-right: 10px;
  }
  
  
  
  
  
  
  
  Untuk proses editting kode css sudah selesai. Kemudian saatnya sahabat 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 saja 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.

Selamat mencoba sahabat!!!!

 

 

Facebook

Twitter

Google+

Pinterest

Posted by : KeCenk Tour n Travel

2 Comments

Jumat, 08 Januari 2010