Halaman

misther-junett.blogspot.com
  • Web
  • misther-junett
  • Kamis, 03 Februari 2011

    HOME , Tutorial Cara Membuat Template Tahap Tiga

    Tutorial Cara Membuat Template Tahap Tiga

    Setelah sekian lama tertunda, Alhamdulillah akhirnya panduan cara membuat template bagian tiga ini saya publish dengan susah payah :D . 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 :D )
    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

    Tidak ada komentar:

    Posting Komentar