Saturday, December 13, 2008

Catatan 1: Memahami Struktur Dasar Template

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.

Friday, November 14, 2008

Belajar Design Blog

Akhirnya launching juga blog baru, gimana template-nya? biasa aja bukan. Ya, blog ini dibuat memang untuk belajar mendesign template sendiri, saya mulai dengan memahami bagian-bagian dari template agar kita bisa tau cara mengedit template dan membuatnya sesuai keinginan kita. Tutorial yang ada pada blog ini nantinya juga akan banyak bersumber dari OurBlogTemplates, karena kita bisa dapat tutorial mulai dari basic. Kalau anda tidak punya masalah dengan English Language, silahkan langsung belajar dari blog tersebut, namun jika kemampuan bahasa Eglish anda diragukan tetaplah stay tune disini, ok.

Optional Side Ad Optional Side AdOptional Side AdOptional Side Ad