Tutorial Cara Membuat Template Tahap Tiga

Setelah sekian lama tertunda, Alhamdulillah akhirnya panduan cara membuat template bagian tiga ini saya publish dengan susah payah . Sekali lagi saya katakan , bahwa panduan ini hanyalah pengalaman saya saja. Masih banyak tips cara membuat tempate di blog lain yang lebih komplit, lebih jelas, dan lebih segalanya dibanding artikel yang ada di blog sederhana ini. Jadi saya mohon maaf jika masih banyak kekurangan dan kelemahan dalam cara saya menuliskan nya ya.
Seperti janji saya Pada sesi Belajar membuat template tahap dua yaitu :

Pada sesi membuat template tahap tiga kita akan coba memasukkan konten atau isi dari setiap bagian, agar template kita terlihat mendekati nyata.

Yang artinya kita akan mencoba memodifikasi ,memasukkan , menambah, dan memperindah tampilan layout template blog kita dengan aneka konten yang biasanya menyertai di blog-blog yang sudah online.
Konten atau isi yang saya maksud , misalnya :
Memasukkan Gambar atau Image sebagai background Template
Mengatur ukuran huruf
Memodifikasi Judul atau Title Blog
Memodifikasi tab navigasi
Menambah dan Mengatur Meta title,tanggal,author dan label dll
Menambah dan Mengatur Judul Sidebar
Menambah dan Mengatur Judul Posting
Memasukkan Kode HTML Gadget atau Widget pada sidebar
Menambah Kolom Komentar
Dan lain-lain (akan saya tambahkan kemudian)
Baiklah, untuk hal pertama yang akan kita kerjakan adalah memasukkan semua tulisan ke masing-masing bagian. O ya, untuk memudahkan dan menyegarkan kembali, saya sengaja membuat layout template-pertamaSTEP9 yang gunanya memperjelas tata letak masing-masing bagian. Silahkan dilihat ya. Nanti disana(template-pertamaSTEP9) hanya sebagai acuan saja, supaya kita lebih memahami isi setiap bagian,seperti letak header,navigasi,sidebar,posting,footer,dan lain-lain.
Apa yang kita isi ? dan dimana ngisinya ?
Di template contoh ini, kita isikan saja dulu terserah apa saja, dan letak pengisiannya sebagai berikut : :

1. Mengisi Template bagian Top Bar

Untuk Top Bar pengisian nya ada di bagian tulisan
<div id="topbar">Isi topbar</div>

Ganti itu tulisan Isi topbar dengan tulisan terserah anda. Kalau saya , mengganti tulisan Isi topbar dengan :
Isi topbar | RSS | Hal-Penting | Toko-saya
Sehingga menjadi seperti ini :

<div id="topbar">
Isi topbar |
RSS |
Hal-Penting |
Toko-saya
</div>
 

Tulisan2 itu nantinya akan kita jadikan link sebuah halaman web yang isinya menurut kita penting untuk ditampilkan. Untuk tahap awal, kita berikan saja dulu tulisan apapun. Contoh hasilnya bisa dilihat di template-pertamaSTEP10

2. Mengisi Template bagian Header

Untuk Header, pengisiannya dibagian :
<div id="header">Isi header </div>
Ganti itu tulisan Isi header dengan tulisan terserah anda. Kalau saya , mengganti tulisan Isi header dengan :
Panduan Belajar Membuat Template Blog
Setelah kita ganti nantinya akan seperti ini :

 <div id="header"> Panduan Belajar Membuat Template Blog </div> 

Isi Header tersebut rencananya akan kita gunakan sebagai JUDUL blog. Contoh hasilnya bisa dilihat di template-pertamaSTEP10

3. Mengisi Template bagian Navigasi

Navigasi,pada dasarnya sama dengan isi Top Bar, yaitu berisi Link sebuah halaman web, namun biasanya Navigasi lebih mengarah kepada halaman web yang ada di dalam website kita sendiri. Sedangkan TOP bar, biasanya digunakan orang untuk membuat link ke halaman tertentu yang dianggap penting, misalnya halaman affiliate, halaman penjualan dan sebagainya. Namun ini tidak menjadi aturan yang baku. Terserah kita saja.
Untuk Navigasi , pengisiannya dibagian :
<div id="navigasi">Isi navigasi</div>
Ganti itu tulisan Isi navigasi dengan tulisan terserah anda. Kalau saya , mengganti tulisan Isi navigasi dengan :
Home | About-Me | Contact-Me | My-Friend | Agama | Sosial-Budaya
Setelah kita ganti nantinya akan seperti ini :

<div id="navigasi">
Home |
About-Me |
Contact-Me |
My-Friend |
Agama |
Sosial-Budaya |
</div>

Contoh hasilnya bisa dilihat di template-pertamaSTEP10

4. Mengisi Template bagian Kolom Posting

Kolom posting, adalah kolom yang berisi konten artikel , link, kode-kode iklan, atau image ,dan lain-lain yang gunanya untuk memberikan suatu informasi kepada pengunjung ( Udah tau pak )
Untuk Kolom Posting, pengisiannya dibagian :
<div id="isi-Posting">Isi Posting</div>

Ganti itu tulisan isi-Posting dengan tulisan terserah anda. Kalau saya , mengganti tulisan isi-Posting dengan : misalnya seperti ini :
Artikel postingan Artikel postingan Artikel postingan Artikel postingan Artikel
postingan Artikel postingan Artikel postingan Artikel postingan Artikel postingan
Artikel postingan Artikel postingan Artikel postingan Artikel postingan Artikel postingan
Setelah kita ganti nantinya akan seperti ini : ( Pastinya udah bisa dong yah ?)
Contoh hasilnya bisa dilihat di template-pertamaSTEP10
Sebelum kita lanjutkan ke bagian sidebar dan footer, kita akan menambahkan pada bagian isi-Posting dengan kolom Meta dan kolom komentar. Kolom meta adalah kolom yang biasanya digunakan untuk menempatkan title atau judul postingan ,tanggal postingan , author dan label postingan . Penempatan nya kadang disatukan dibagian atas kolom posting, dan ada juga yang menempatkan terpisah Judul artikel diatas dan Tanggal,author serta label dibagian bawah artikel. Contoh penempatan terpisah bisa anda lihat di blog sederhana saya disini : Blog panduan bisnis di internet
Catatan : beberapa orang ada yang lengkap menampilkan meta, dan ada juga yang tidak lengkap, bahkan ada pula yang sama sekali tidak menampilkan meta . Tentu mereka punya alasan tersendiri
Kita akan menampilkan versi lengkapnya, agar kita mengerti caranya. Nantinya sih terserah masing-masing . Dan juga akan kita pisahkan, yakni judul artikel dibagian atas, dan yang lainnya di bagian bawah artikel.
Untuk hal ini, kita mesti menambahkan beberapa kode identitas (div id ) sebagai berikut  :
Mari kita buka pada bagian kode menampilkan seluruh kolom posting: silahkan lihat kembali di template-pertamaSTEP4

<div id="kotak-posting">
<div id="isi-Posting">isi postingan</div>
</div>

Kita rubah dengan menambahkan
<div id=”Judul-Artikel”>Judul Artikel</div> (tambahkan setelah id kotak-posting )
dan juga menambahkan <div id=”rencana-meta”> rencana-meta Artikel</div> (tambahkan setelah id isi-Posting)
Kemudian kita juga akan menambahkan kolom komentar , yaitu dengan memasukkan identitas :
<div id=”komentar”>rencana kolom komentar</div>
dan juga kotak form komentar dengan identitas :
<div id=”form-komentar”>rencana form komentar</div> (tambahkan setelah id rencana-meta)
Setelah ditambahkan akan terlihat seperti ini :

<div id="kotak-posting">
<div id="Judul-Artikel">Judul Artikel</div>
<div id="isi-Posting">isi postingan</div>
<div id="rencana-meta"> rencana-meta Artikel</div>
<div id="komentar">rencana kolom komentar</div>
<div id="form-komentar">rencana form komentar</div>
</div>

Contoh hasil nya bisa dilihat di template-pertamaSTEP11
Karena kita telah menambahkan meta,dan kolom komentar, maka kita perlu memberikan style atau pengaturan atas ID tsb.Dan kita menambahkan kode2 sbb :

Ingat : Penambahan kode-kode css , adanya diantara kode <style type=”text/css”> tambah kode2 CSS  disini </style>

Tapi agar serasi sebaiknya masukkan kode css nya didekat kode css posting, biar nantinya tidak menyulitkan waktu mengedit.
Karena identitas dari yg akan kita atur berada dalam keluarga kotak-posting, maka saya kira cukuplah mengcopy code css milik isi-posting yg tertulis seperti ini ;

#isi-Posting {
width:485px;
border:1px solid #000;
background:#ff0;
padding:3px;
margin:2px;
}

tinggal kita ganti saja pada : #isi-Posting nya dengan masing2 identitas . Jadi kita copy dan paste sebanyak 4 kali dan hanya mengganti tulisan #isi-Posting dengan :
#Judul-Artikel
#rencana-meta
#komentar
#form-komentar
Contoh penulisan kode dan hasil nya bisa dilihat di template-pertamaSTEP12
Untuk sidebar dan footer, saya kira ndak perlu dikasih contohnya ya, Insya Allah mah sudah pada lancarrr.
Dan yang akan kita atur kemudian adalah Pengaturan ukuran huruf, dan penambahan image sebagai background template. Tapi akan saya tuliskan di lain artikel .
Semoga bermanfaat

Artikel Terkait