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.
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 24. Sekarang tuju bagian bawah dan cari kode seperti berikut ini:
======================================================== */
#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...... */
<div id='sidebar1'>Kemudian ganti dengan kode dibawah ini :
<!-- Ini untuk Wadah widget blog sidebar1 -->
</div>
<div id='sidebar1'>
<b:section class='sidebar' id='sidebar-kiri' preferred='yes'/>
</div>
5. Masih diarea ini cari kode berikut :
<div id='sidebar2'>Kemudian ganti dengan kode seperti berikut ini :
<!-- Ini untuk Wadah widget blog sidebar2 -->
</div>
<div id='sidebar2'>Sekarang Simpan template dan lihat hasilnya...!!! gimana masih berantakan ya tenang dulu masih ada kelanjutannya.
<b:section class='sidebar' id='sidebar-kanan' preferred='yes'/>
</div>
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 >>
0 komentar:
Posting Komentar