Membuat Template Blogspot Bagian 4 (Block Sidebar)

Tutorial dibawah ini merupakan kelanjutan dari Tutorial Mmebuat Template Blogspot Bagian 3 jika belum mengikuti bagian 1 yaitu Bagian Dasar Template silahkan masuk ke Bagian 3.

Sidebar Wrapper

Kemarin telah saya bahas mengenai yaitu mengenai penentuan dan pembuatan Header Wrapper sekarang masuk ke tahap selanjutnya yaitu menentukan dan membuat Block untuk Sidebar Wrapper dimana block sidebar tempat untuk menyimpan segala macam aksesoris dari blog kita nah langsung saja berikut langkah-langkahnya :

1. Buka Halaman Edit HTML yang kemaren dibuat
2. Cari dan hapus kode berikut ini :

/* Awal kode css untuk block sidebar1 dan block sidebar2
======================================================== */
#sidebar1 {
}

#sidebar2 {

}

3. Lalu ganti dengan kode dibawah ini

/* AWAL KODE SIDEBAR 1 DAN SIDEBAR 2
======================================================== */
#sidebar1 {
  width:200px;
  float:left;
  margin:10px 0 0 0;
  padding:0;
  word-wrap: break-word;
  overflow: hidden;
  }
#sidebar2 {
  width:200px;
  margin:10px 0 0 0;
  padding:0;
  float:right;
  word-wrap: break-word;
  overflow: hidden;

  }


#sidebar1 h2, #sidebar2 h2 { /* judul sidebar gan */
background:#CCC;
margin:0;
  padding:5px;
  font-size:14px;
  font-weight:bold;
  color:#191919;
  }

.sidebar {
  font-color:#151515;
  margin:0;
}
.sidebar ul {
list-style:none;
margin:0;
padding:0;
}
.sidebar ol {
list-style:decimal;
}
.sidebar li {
line-height:1.4em;
border-bottom:1px dotted #EAEAEA;
}
.sidebar .widget-content {
padding:10px;
margin:0;
}
.sidebar .widget {
margin:0px;
margin-bottom:10px;
border:1px solid #CCC;
}
.clear {
  height:1px;
  margin:0;
  padding:0;
  clear:both;
  }
/* BATAS AKHIR KODE SIDEBAR GANN...... */

4. Sekarang tuju bagian bawah dan cari kode seperti berikut ini:

<div id='sidebar1'>
<!-- Ini untuk Wadah widget blog sidebar1 -->
</div>

Kemudian ganti dengan kode dibawah ini :

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

5. Masih diarea ini cari kode berikut :

<div id='sidebar2'>
<!-- Ini untuk Wadah widget blog sidebar2 -->
</div>

Kemudian ganti dengan kode seperti berikut ini :

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

Sekarang Simpan template dan lihat hasilnya...!!! gimana masih berantakan ya tenang dulu masih ada kelanjutannya.
Keterangan :
Sidebar memiliki ukuran lebar masing-masing 200px kamu bisa menambah atau mengurangi lebar sidebar tersebut, tetapi harus diingat dalam penambahan lebar setiap element akan mempengaruhi element yang lain jadi jika melakukan perubahan pada lebar sidebar harap rubah juga lebar main-wrapper dengan menyesuaikan mengurangi lebar main-wrapper.

Selanjutnya Bagian 5 Main Wrapper >>

Share this post