Modifikasi Dokumen HTML Template

Tahap memodifikasi dokumen HTML template minima merupakan tahap yang terpenting dari semua tahap dalam membuat template blog. Karena membuat template blog sendiri berarti membangun sebuah dokumen HTML. Seperti yang sudah pernah katakan bahwa cara mudah membuat template blog adalah dengan memodifikasi template yang sudah ada. Nah kali ini akan menjelaskan bagaimana memodifikasi kode-kode didalam dokumen HTML template minima agar sesuai dengan apa yang telah kita rencanakan sebelumnya

Saya akan menjelaskan bagian demi bagian. Sekarang masuk ke akun blogger anda dan tujulah halaman edit HTML, pastikan anda memilih template minima dan kotak expand template widget tidak usah dicentang.
Header

Cari kode seperti dibawah ini

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}

Kode-kode CSS diatas adalah untuk mengatur elemen header-wrapper, elemen header yang terluar. Ganti kode-kode diatas menjadi seperti ini

#header-wrapper {
width:900px;
height: 150px;
margin:0 auto 10px;
background:url(http://img6.imageshack.us/img6/214/1001template.gif)no-repeat top left;
}

900 pixel adalah lebar header yang baru.
Perhatikan penambahan kode baru untuk background. Kita mengambil gambar dari hasil desain yang telah kita upload di imageshack tadi dengan meletakkan direct link dari gambar yang kita upload di imageshack. (http://img6.imageshack.us/img6/214/1001template.gif).

No-repeat berarti gambar background hanya ditampilkan sekali. Jika kita tidak menambahkan kode ini maka gambar akan ditampilkan berulang-ulang oleh browser sepanjang wrapper. Top left adalah posisi gambar didalam elemen header-wrapper, yaitu berada di atas kiri. Broder kita hilangkan saja.

Cari kode seperti ini

#header {
margin: 5px;
border: 1px solid $bordercolor;
text-align: center;
color:$pagetitlecolor;
}

Rubah menjadi seperti ini

#header {
margin: 5px;
display: none;
text-align: center;
color:$pagetitlecolor;
}

Kode CSS diatas adalah untuk mengatur tampilan judul blog. Penambahan kode display: none; berfungsi untuk menyembunyikan judul blog . Biasanya blogger secara otomatis akan menampilkan judul blog, apabila anda ingin menyembunyikan judul blog karena didalam gambar background anda sudah menambahkan judul blog maka anda harus menambahkan kode tersebut.

Cari kode CSS seperti ini

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

Kode CSS diatas adalah untuk mengatur tampilan deskripsi blog, jika anda tidak ingin menampilkan nya maka tambahkan juga kode display:none seperti pada kode CSS judul blog.
Sekarang simpan hasil editing anda di preview.

Outer-wrapper
Outer-wrapper adalah elemen terluar dari template minima. Elemen ini membungkus semua elemen dari template minima, seperti header, content-wrapper, main-wrapper, sidebar, dan footer. Sesuai dengan rencana kita tadi kita akan merubah lebar template menjadi 900pixel, cari kode seperti ini

#outer-wrapper {
width: 660px;
Ganti angka 660px menjadi 900px

Content-wrapper
Didalam template minima elemen content-wrapper tidak diatur dengan CSS, karena kita akan menambahkan background untuk elemen ini maka kita perlu menambahkan kode CSS untuk elemen ini. Perlu diketahui panambahan background berupa image untuk elemen content-wrapper berguna agar tampilan main (area posting) dan sidebar sama tinggi. Bloggertrick lebih suka menggunakan cara ini dari pada memberi background elemen main dan sidebar dengan warna saja. Buatlah kode CSS seperti ini

#content-wrapper{
width: 900px;
margin-bottom: 10px;
background: url(http://img5.imageshack.us/img5/1239/1001contentwrapper.gif)repeat-y top center;
}

Letakkan diatas kode ini

#main-wrapper {
Untuk background link url kita ambil dari direct link gambar untuk content-wrapper yang telah kita upload di imageshack sebelumnya.Kode repeat-y berfungsi untuk memerintahkan browser agar menampilkan gambar tersebut secara berulang-ulang secara vertical. Bandingkan dengan kode no-repeat pada background untuk header.Top center berarti gambar diposisikan di atas tengah didalam elemen content-wrapper.

Main-wrapper
Elemen main-wrapper adalah elemen yang merupakan area untuk postingan. Untuk mengaturnya cari kode CSS seperti ini

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Rubahlah menjadi seperti ini

#main-wrapper {
width: 470px;
float: $startSide;
margin-left: 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Lebar kita rubah menjadi 470 pixel seperti yang telah kita rencanakan sebelumnya.
Margin-left: 10pixel adalah jarak antara elemen main-wrapper dengan elemen di sebelah kirinya yaitu elemen sidebar1 sebesar 10pixel.

Sidebar-wrapper
Template minima hanya memiliki satu sidebar, karena sebelumnya kita telah merencanakan untuk membuat template dengan dua sidebar maka kita perlu menambahkan kode CSS untuk sidebar baru. Caranya cukup mudah, anda tinggal mengkopi kode CSS sidebar lama. Kode CSS untuk sidebar lama adalah seperti ini

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Kopi dan paste saja dibawahnya dan lakukan beberapa perubahan hingga menjadi seperti ini

#sidebar1-wrapper {
width: 250px;
margin-left: 5px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar2-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Beri nama sidebar yang lama dengan sidebar1-wrapper dan sidebar baru dengan sidebar2-wrapper. Rubah juga lebar masing-masing sidebar sesuai dengan yang telah kita rencanakan sebelumnya.
Beri margin untuk sidebar1 sebesar 5pixel.
Nilai float untuk sidebar1 adalah left, karena akan kita posisikan disebelah kiri template, sedang untuk sidebar2 float-nya right agar berada disebelah kanan template.

Footer
Untuk footer kita hanya akan merubah lebar dan menambah background dengan warna, cari kode seperti ini

#footer {
width:660px;

rubah nilai 660 pixel menjadi 900pixel, tambahkan properties background. hingga menjadi seperti ini

#footer {
width:900px;
background: #FCE6E6;

Sampai disini tahap memodifikasi bagian CSS sudah selesai selanjutnya kita akan beralih ke bagian HTML. Di bagian HTML kita hanya akan menambahkan kode untuk sidebar baru. Caranya adalah sama dengan penambahan kode CSS untuk sidebar baru, anda tinggal mengkopi saja dari kode HTML sidebar yang lama. Cari kode HTML seperti ini

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’BlogArchive2′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
<b:widget id=’Profile2′ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>
Kopi kode HTML diatas dan paste diatas kode ini
<div id=’main-wrapper’>

Jadinya seperti ini

<div id=’sidebar-wrapper’>
<b:section class=’sidebar’ id=’sidebar’ preferred=’yes’>
<b:widget id=’BlogArchive2′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
<b:widget id=’Profile2′ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>
<div id=’main-wrapper’>

Kode <div id=’main-wrapper’> adalah kode HTML untuk elemen main-wrapper, mengapa kita meletakkan kode HTML untuk sidebar baru di atas kode HTML main-wrapper adalah karena seperti yang telah kita rencanakan sebelumnya kita akan memposisikan area posting (main-wrapper) diantara kedua sidebar. Sidebar1-main-wrapper-sidebar2.
Rubah juga nama dari masing masing sidebar. Perhatikan kode yang berwarna merah
Hapus widget yang ada di sidebar1. Anda nanti bisa menambahkan widget untuk sidebar1 melalui halaman add elemen seperti cara biasa.

Sehingga secara keseluruhan kode untuk sidebar1-main-wrapper-sidebar2 menjadi seperti ini

<div id=’sidebar1-wrapper’>
<b:section class=’sidebar’ id=’sidebar1′ preferred=’yes’>
</div>
<div id=’main-wrapper’>
<b:section class=’main’ id=’main’ showaddelement=’no’>
<b:widget id=’Blog1′ locked=’true’ title=’Posting Blog’ type=’Blog’/>
</b:section>
</div>
<div id=’sidebar2-wrapper’>
<b:section class=’sidebar’ id=’sidebar2′ preferred=’yes’>
<b:widget id=’BlogArchive2′ locked=’false’ title=’Blog Archive’ type=’BlogArchive’/>
<b:widget id=’Profile2′ locked=’false’ title=’About Me’ type=’Profile’/>
</b:section>
</div>

Sampai disini seluruh proses memodifikasi template minima bisa dianggap selesai. Simpan hasil perubahan dan lihat hasilnya. Apakah anda puas??? Sebenarnya masih banyak yang bisa kita lakukan untuk memodifikasi dokumen HTML template minima tersebut. Yang sudah bloggertrick jelaskan diatas adalah hanyalah dasar-dasarnya saja. Anda bisa mengembangkannya sesuai dengan keinginan dan selera anda.

Yang paling penting adalah sering sering berlatih. Dengan sering berlatih anda akan dengan sendirinya bisa memahami bagaimana memodifikasi kode-kode didalam dokumen HTML template. Jangan takut salah dan selamat berkreasi.