Re-Shared, Membuat Lebih Dari Satu Bagian (Section) Sidebar

FAST DOWNLOADadsWidgets sidebar blogspot dapat kita buat lebih dari satu section class, untuk template bawaan memang satu bagian (section class) tapi kita dapat menambahkannya secara manual, akan sama seperti halnya anda menambah kolom sidebar, hanya disini kita juga akan membuat css stylenya agar lebih unik dan menarik setiap section sidebar, jika tidak, tidak perlu anda pisah section atau bagian sidebar, toh akan begitu-begitu saja.

Untuk yang ingin menambah section class sidebar, agar lebih mudah kita buat dulu widget yang akan dibuat, sebenarnya tidak perlu, tapi agar lebih mendalami saja, sembari belajar HTML dan CSS.


CSS yang perlu kita buat :

.sidebar-wrapper {style yang diperlukan}
.sidebar1-wrapper {style yang diperlukan}
.sidebar2-wrapper {style yang diperlukan}
dan seterusnya.

Itu baru untuk wrapper yang lainya seperti
.sidebar h2 {style yang diperlukan}
.sidebar li {style yang diperlukan}
.sidebar ul {style yang diperlukan}

Contoh kecil saja :
.sidebar-wrapper {width:250px;float:left}
.sidebar h2 {text-align: center;font:12px oswald}
.sidebar li {backround:blue}
.sidebar ul {margin: 0 5px 0 0;padding:10px}

Jika CSS sudah dibuat kita menuju bagian Fungsi utama, yaitu sidebar widget itu sendiri, pengkodean seperti gambar diawal post.
Contoh :
<div class='sidebar1-wrapper'>
<b:section class='sidebar1' id='sidebar1' preferred='yes'>
  <b:widget id='HTML1' locked='false' title='' type='HTML'>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>
</b:includable>
  </b:widget>
Dibagian ini jika anda ingin memisahkan bagian sidebar satu dan lainya tutup dengan.
</b:section>
</div>
Lanjutkan dengan membuat class section yang baru seperti.
<div class='sidebar2-wrapper'>
<b:section class='sidebar2' id='sidebar2' preferred='yes'>
Bagian isi widget yang diedit class section nya.

Tambahan saja untuk coding add gadget status, anda bisa menambahkan diantara

<b:section..........(antara)..........'>
showaddelement='yes' atau 'no'

Jika anda pengguna responsive template, tambahkan juga css di bagian @media screen, agar widget sidebar sesuai dengan harapan. Untuk footer hampir sama seperti sidebar, dapat kita sesuaikan baik dari style, class, hingga jumlah kolom.FAST DOWNLOADads