0 Cara Menambah Dan Membagi Dua Kolom Sidebar

Oleh sabia | Senin, Mei 16, 2011 | Tags:
  Setelah sebelumnya saya pernah menulis tentang memperlebar kolom sidebar, pada tulisan kali ini saya ingin menambahkan 2 buah kolom sidebar yang disimpan di bawah sidebar yang pertama . Sedikit penjelasan saja, fungsi dari kolom sidebar ini adalah sebagai tempat menyimpan pernak-pernik untuk melengkapi dan mempercantik blog. Nantinya disini bisa ditambahkan berbagai widget atau gadget apa saja sesuai keinginan pemilik blog.


  Seperti pada tulisan sebelumnya kode untuk kolom sidebar adalah seperti ini :


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

Untuk menambah dua kolom baru di bagian sidebar, berarti juga harus membuat dan menambahkan kode css untuk dua kolom sidebar baru itu, kode yang saya buat untuk 2 kolom sidebar seperti ini :


#rightsidebar {
width: 155px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#leftsidebar {
width: 155px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Penulisan value atau nilai dalam property float dalam CSS bisa di tulis seperti ini :


  • float : right
  • float : left
  • float : none
  • float : inherit
  • float : $startSide
  • float : $endSide
  Misalkan seperti kode untuk 2 kolom sidebar diatas, value dalam property float bisa di ganti yang tadinya kodenya seperti ini " float : $endSide " bisa diganti seperti ini " float : right ", itupun tergantung mau menempatkan kolom sidebar nya  disebelah mana. Kalau untuk contoh diatas penempatan atau posisi kolom sidebar nya berarti disebelah kanan kolom postingan .

  Kembali ke penambahan 2 kolom sidebar, setelah selesai membuat kode css untuk 2 kolom sidebar, kemudian simpan dibawah kode css yang pertama, urutannya seperti ini :


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

#rightsidebar {
width: 155px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

#leftsidebar {
width: 155px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}

Setelah selesai disimpan, jangan dulu berpindah dari halaman ini . Supaya ke dua kolom sidebar muncul harus dibuatkan id pemangggilnya di dalam html . Cari kode id untuk kolom sidebar pertama, yang seperti ini :


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

<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

Setelah ketemu, buat kode id untuk 2 kolom sidebar yang baru dan simpan di bawah kode id yang diatas, jadi nanti kodenya seperti ini :





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



<div id='rightsidebar'>
<b:section class='sidebar' id='rightsidebar' preferred='yes'>
</b:section>
</div>

<div id='leftsidebar'>
<b:section class='sidebar' id='leftsidebar' preferred='yes'>
</b:section>
</div>


<!-- spacer for skins that want sidebar and main to be the same height-->
      <div class='clear'>&#160;</div>

</div>




Setelah selesai supaya hasil perubahannya di proses klik Simpan Template .
 

KOLOM TUTORIAL BELAJAR
Garut, 16 Mei 2011

Ada 0 komentar Untuk: Cara Menambah Dan Membagi Dua Kolom Sidebar

Posting Komentar Untuk Artikel Ini :