Membuat Template Blogspot Bagian 5 (Main Wrapper)

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

Main Wrapper
Main wrapper merupakan salah satu elemen yang paling penting pada sebuah blog dimana Semua isi posting, judul post, meta dan komentar akan disimpan diarea ini, jadi kita harus secara teliti menentukan tampilan dan ukuran agar bisa serasi dan rapi.
Diposting sebelumnya telah kita tentukan lebar masing-masing Sidebar memiliki lebar 200px nah sekarang kita akan menggunakan sisa lebar dari body tersebut, template yang akan kita buat ini memiliki lebar 960px bisa dilihat pada posting (bagian 1) :
- Jadi body 960px dikurangi
- Sidebar1 200px X Sidebar2 200px = 400px
- Berarti memiliki sisa 560px.
Tapi kita tidak akan mengambil habis 560px supaya rapi dan kolom tidak saling bertabrakan kita harus menyisakan sebagai padding dan margin agar ada jarak antara Block Sidebar dan Block Post, jadi saya akan memberi lebar Main Wrapper sebesar : 535px, dan margin kiri 10px - margin kanan 10px sisa 5px biarin aja untuk ruang cadangan.

Lalu penerapannya sebagai berikut :
1. Buka Edit HTML Templatenya...!

2. Cari dan hapus kodeCSS  berikut ini :

/* awal kode css untuk main wrapper dan posting
======================================================== */
#main-wrapper {

}

3. Kemudian ganti dengan CSS dibawah ini :

/* AWAL KODE MAIN WRAPPER DAN POSTING
======================================================== */
#main-wrapper {
width: 535px;
float: left;
margin:10px;
padding:0;
word-wrap: break-word;
overflow: hidden;
border:1px solid #CCC;
}

.date-header {
font-size:14px;
font-weight:normal;
color:#CCC;
}

.post {
overflow:hidden;
float:left;
}

.post h3 {
font-size:22px;
font-weight:normal;
margin:0px;
padding:0px;
line-height:1.6em;
}

.post blockquote {
font-style:normal;
font-size:13px;
padding:10px 20px;
margin:5px 0px 5px 25px;
background:#F3F6F9;
border:1px solid #D8D8D8;
}
.post-footer{
padding:3px 8px;
font-size:11px;
background:#F5F5F5;
margin:10px 0 10px 0;
border:1px solid #E3E3E3;
}
.post-body { padding:10px 25px 0px 0; }
.post-body h2 {font-size:16px;font-weight:normal;margin:0px; padding:0px;line-height:1.6em;}
.post-body ul {font-size:12px; line-height:18px; padding-left:12px}
.post-body ol{list-style-type:decimal; line-height:18px; margin:0px; padding:0px 0px 10px 35px}
.post-body ul{list-style:none; line-height:18px; margin:0px; padding:0px 0px 10px 0px}
.post-body li{margin:0px; padding:0px}
.post-body ul li{list-style:disc outside; line-height:18px; margin:0px 30px 0px 30px; padding:5px 0px 0px 0}

/* KODE CSS UNTUK KOMENTAR
================================================== */
#comments {
padding-left:18px;
padding-right:18px;
margin-top:10px;
}

#comments h4 {font-size:14px;padding:5px;}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}
#comments-block .comment-author {
margin:.5em 0;
margin-top:10px;
padding:5px;
background:#F5F5F5;
border-bottom:1px solid #D8D8D8;
}
#comments-block .comment-body {
padding:5px 5px 5px 10px;
margin:-6px 0 -9px 0;
background:#F5F5F5;
border-top:1px solid #fff;
}
#comments-block .comment-footer {
padding:0px 5px 0px 5px;
font-size:11px;
background:#F5F5F5;
}
#comments-block .comment-body p {
margin:0 0 .75em;
}
.deleted-comment {
font-style:italic;
color:gray;
}
#blog-pager-newer-link {
float:left;
}
#blog-pager-older-link {
float:right;
margin-right:10px;
}
#blog-pager {
text-align:center;
padding:0px 2px 10px 12px;
}
#blog-pager-older-link,#blog-pager-newer-link {
background:#F5F5F5;
padding:1px 8px;
border:1px solid #D8D8D8;
}
.feed-links {
display:none;
}

4. Tuju bagian bawah cari kode berikut ini (letakknya diantara kode sidebar1 dan sidebar2)

<div id='main-wrapper'>
<!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
</div>

5. Hapus dan ganti dengan kode dibawah ini :

<div id='main-wrapper'>
<!-- Ini untuk Wadah posting, komentar atau kontent lainnya -->
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Jika kode pada langkah 4 sudah sama atau menyerupai kode langkah 5, langkah ini bisa dilewati.

6. Simpan Template.

Sekarang template sudah bisa dilihat bentuknya dan sudah bisa digunakan untuk posting, pasang widget, masih kurang satu langkah lagi template sempurna yaitu Footer Wrapper. 


Keterangan :
- showaddelement='no' : Ini menunjukkan bahwa Link "Add Gadget" tidak dipampilkan kamu bisa merubah 'no" menjadi 'yes' jika ingin menampilkan Link "Add Gadget".
-  locked='true' : Ini menunjukkan bahwa Element posting terkunci dan tidak bisa dipindah-pindah.

Selanjutnya Bagian 6 Footer Wrapper >>