Saturday, December 13, 2008

Posted by Project on/at 6:51 PM

Dalam mendesain template sebenarnya kita perlu tahu dulu mengenai struktur dasar dari template tersebut karena beberapa template bisa memiliki struktur yang berbeda-beda sesuai kebutuhan. Nah, dengan mempelajari struktur dasarnya, kita bisa lebih mudah dalam mengutak-atik template, mendesainnya dari awal serta mengubah struktur aslinya kedalam bentuk yang berbeda.

Ada beberapa bagian struktur template yang sering kita lihat pada kebanyakan blog yaitu header, footer, dan bagian post. Tetapi ada beberapa bagian dari sebuah blog yang tidak terlihat pada tampilan template tapi tidak kalah penting untuk membuat template tampil lebih baik, bisa disebut block atau container.
Dan inilah bentuk template dasar seperti yang saya pakai di Experiment BlogQu

Berikut keterangannya mulai dari block paling besar sampai ke block paling kecil

1. Body: block paling luar dari Body template (pada dasarnya semua yang menutupi layar komputer).

2. Outer-wrapper: bagian ini yang menutupi semua template (body berada di sisi luar template). Umumnya membuat wrapper untuk menempatkan beberapa block yang lebih kecil di dalamnya, dan block yang biasanya berada di dalam Outer-wrapper adalah Header, Content, and Footer.

3. Header: block ini adalah bagian paling atas dari blog (dari namanya cukup jelas). Tapi di dalam Header kita bisa membuat sub-block yang lain juga misalnya block Header Title, block Header Description, dan yang lain seperti banner Adsense, menu bar, dan sebagainya. Untuk itu perlu menutup semua sub-block di dalam satu container yang besar , container paling besar pada Header biasanya Header-wrapper yang menutup semua yang ada di dalamnya.

4. Content: dibawah Header adalah Content-wrapper – container block paling penting dari semua. Sekaligus didalam wrapper ini sebagai container Sidebar (bisa 1,2 atau lebih jumlah sidebar) dan container Main (yang berisi posting, komentar atau beberapa iklan).

5. Footer: adalah container paling bawah template. Seperti pada bagian Header, kita juga akan membutuhkan Footer-wrapper untuk mengisi sub-block yang lain pada bagian.

6. Main: Main-wrapper adalah container paling luar pada bagian Main yang berada di dalam Content-wrapper. Di dalam Main-wrapper ini ada Post block, Comment block, Date Header, dan widget-widget lain yang dibuat menggunakan pilihan Add Page Element.

7. Sidebar: adalah block yang berisi semua widget misalnya About Me, Labels, Archive, Text, HTML, Adsense, dan lain-lain. Pada template Blogger standard, kita biasanya hanya menemukan 1 sidebar untuk template 2 kolom (Main dan Sidebar). Tetapi sebenarnya mudah saja untuk menambahkan beberapa sidebar lagi, paling umum dengan 2 sidebar atau template 3 kolom. Ketika kita sudah memahami srtuktur dari suatu template maka akan mudah buat kita untuk menambahkan dan memindahkan sidebar kekiri atau ke kanan dari container Main.

8. Blog Post: block ini berisi Posts Titles, Post, Post Author, Labels, dan sebagainya.

Sampai disini sudah bisakah memahami struktur template? Supaya lebih jelas lagi coba kita lihat struktur template secara hierarki berikut ini.


Body
  • Outer-wrapper
    • Header-wrapper
      • Blog Title
      • Blog Description
      • Other widgets
    • Content-wrapper
      • Sidebar-wrapper (1,2,3...)
      • Main-wrapper
        • Date Header
        • Posts
          • Post Title
          • Post Content (atau disebut Post Body)
          • Post Footer (Author, Labels, dll)
        • Comments
        • Feed Link
        • Other widgets (kebanyakan unit iklan)
    • Footer-wrapper
      • Footer text (disclaimer, copyrights, dll)
      • Other widgets

Ketika kita memahami struktur dasar tersebut, akan lebih mudah untuk belajar mengenai struktur kode template Blogger. Mempelajari struktur kode template tersebut tidak hanya belajar HTML atau CSS, tetapi juga mengenai bagaimana kode template tersebut diatur, dan pengaturannya agak mirip dengan bagaimana struktur container diatur. Surprise…dengan sedikit pengetahuan mengenai pemrograman web kita bisa meng-kustomisasi atau mengubah template sesuai keinginan kita hanya dengan memahami struktur dasarnya dan beberapa hal mengenai bahasa CSS.

3 comments:

Anonymous said...

Wah hebat..diajeng pinter..tampilan di opera mini pun lucu hehe...tapi perfect buat yang sedang belajar (katanya..). Kalo saya ndak mudeng tuh template2an. Sukses deh

Project said...

gak mungkin, ni bukan cuma gak perfect ben tapi ancur, karena saya cuma ngubah warna body ama warna content-wrappernya doang

Orang Gorontalo said...

mantap kk.... bisa lanjutin gak sampai cara memasukan template ke blogspot...

Post a Comment

Optional Side Ad Optional Side AdOptional Side AdOptional Side Ad