Setelah sekian lama tertunda, Alhamdulillah akhirnya
panduan cara membuat template Blog bagian tiga ini saya publish dengan susah payah. Sekali lagi saya katakan , bahwa
panduan cara membuat Template blog 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 ( http://template.rajaiklanbaris.com/template-pertamaSTEP10.html )
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 ( http://template.rajaiklanbaris.com/template-pertamaSTEP10.html )
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-pertamaSTEP104. 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-pertamaSTEP10Sebelum 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 : http://panduanbisnis1.blogspot.com
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 ( http://template.rajaiklanbaris.com/template-pertamaSTEP4.html )
<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( http://template.rajaiklanbaris.com/template-pertamaSTEP11.html )
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 yg terlihat pada contoh dibawah ini :
<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( http://template.rajaiklanbaris.com/template-pertamaSTEP12.html )
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
Update 27 Agustus 2010:Alhamdulillah lanjutannya bisa lihat disini :
Mengatur Ukuran ,Warna , Style (Face) dan Bakground Huruf Template Tagline :
- templat bahrul ulum
- template bahrul ulum
- tutorial membuat template web
- contoh blogspot komplit dan keren
- cara mempercantik template
- membuat tema blogspot online
- temlate tutorial
- tahap-tahap mengisi bloger untuk pemula
- setting letak judul artikel blog
- mengisi tamplate blog
- mengatur widget kalau ganti template
- membuat header 3 bagian
- mengatur tata letak judul blog
- mengatur posisi judul blog
- mengatur letak lael di blogspot
- menempatkan template di blog
- membuat template blogger toko online
- Mengatur Ukuran Huruf Template
- yahoo indonesia
- tutorial template xml blogger
- tutorial template div
- tutorial mengatur semua judul artikel pada blog
- tutorial membuat template xml blogger sendiri
- tutorial membuat template tahap 13
- Tutorial membuat blog komplit dengan coding
- tutorial lengkap membuat template blogger
- tutorial lengkap cara menata blog
- tutorial buat template blogspot
- tutorial buat template
- tutorial buat header tulisan
- toturial buat templates
- templete Blogspot yang lengkap munculin judul blog
- template tiga bagian
- Memasukkan background berada dalam keluarga kotak-posting
- layouts blogspot sederhana
- kekurangan membuat templete online
- cara menambahkan baground template sendiri pada blog
- cara menambah ukuran template
- cara mempercantik template blog
- cara membuat template seperti
- cara membuat tema blogspot sederhana
- cara membuat bolog menjadi template awal
- cara membuat blog biar tata letak sendiri
- cara Letak style template pada css di blogspot
- cara buat template toko online blogspot
- CARA BUAT HALAMAN TERSENDIRI DI BLOG
- blogspot membuat div
- bikin template toko online blogspot
- Belajar tata letak css 3 kolom
- Belajar Membuat Template Tahap tiga | Bahrul Ulum Dot Com
- cara menampilkan contoh template di widget
- cara mengatur letak dan ukuran widget
- how to open market blogspot#hl=en
- gatget blog desain keren
- ebooks tutorial buat template blogger
- ebook tutorial buat template blogger
- Ebook panduan disain blogspot
- ebook Panduan belajar membuat kode xml untuk blog
- ebook membuat template blog sendiri
- css template web tiga bagian body
- css membuat div untuk konten panjangnya sesuai dengang isi konten
- contoh membuat template
- cara pasang temlate yang cssnya terpisah
- cara mengkopi template web orang
- cara mengatur letak judul blog
- cara mengatur letak gadget yang ada di blog
- bahrul ulum bikin template xml
Sebelum beranjak dari komputer untuk belajar, perkenankanlah saya share sebuah game yaitu Bus Driver. Game ini merupakan game simulator. Dimana disini anda akan menjadi sebuah supir bus yang ditugasi untuk mengantarkan penumpang. Anda harus hati-hati mengendarainya agar tidak terkena nilai minus. Let me see.
