Tuesday, January 20, 2009

Catatan 2: Struktur Kode Template Blogger

Berikut ini merupakan struktur kode template Blogger, sebagai referensi untuk bahan praktek bisa menggunakan Generic Template dari OurBlogTemplate.
Dalam hal ini dibagi ke dalam 3 bagian dengan menunjukkan kode barisan atas dari tiap bagian sehingga nanti kita bisa mencari baris awalnya.



Bagian 1 : kode ‘header’, berisi informasi penting tentang kode template dan judul dari blog. Ini standar untuk semua template, hanya saja jika kita ingin menambahkan beberapa kode disini biasanya untuk meletakkan kode meta tags (informasi tambahan mengenai SEO dari blog kita)

Bagian 2: Ini adalah CSS Styling Section (bagian untuk memodifikasi CSS). CSS merupakan singkatan dari Cascading Style Sheets, bahasa web yang digunakan untuk mengontrol style dari dokumen HTML. Ini merupakan bagian yang ingin kita ketahui lebih banyak jika kita ingin memodifikasi template yang ada atau mendesain template baru. Walaupun disini berupa kode pemrograman web, kita masih bisa melakukan banyak hal pada desain template jika kita memahami struktur bagian ini tanpa perlu tahu banyak tentang HTML dan CSS. Lebih lengkapnya mengenai bagian ini akan kita bahas pada catatan berikutnya.

Bagian 3: Pada bagian ini ada Body atau Data dari kode – bagian paling penting yang mengambil semua konten dari database Blogger dan meletakkannya di tempat yang sesuai kedalam blog ketika seseorang melihat blogmu. Bagian ini juga yang memberitahukan blogmu bagian mana yang datang duluan-apakah Header, Sidebar, Main, Post, Footer, dan lain-lain. Tapi, disini tidak diatur penampilan dari blog dan bagaimana bagian ini terlihat di internet (karena bagian ini dikontrol oleh CSS styling section).

Pada dasarnya kita tidak perlu terlalu khawatir mengenai bagian ini, sama seperti pada catatan pertama. Tetapi yang harus kamu ketahui sedikit kesulitan pada bagian ini adalah jika kamu ingin menambahkan widget-widget yang tidak bisa diletakkan menggunakan button Add Page Element, misalnya button social bookmarking-Digg,AddThis,RSS buttons; atau jika kamu ingin meletakkan kode-kode Adsense pada tempat khusus seperti pada halaman Post (post page); atau meletakkan kode Google Analytics untuk menarik pengunjung ke blogmu; dan beberapa hal lainnya. Umumnya, disediakan instruksi yang mudah difahami untuk menambahkannya pada blogmu. Jadi, sekali lagi tidak ada yang perlu kamu khawatirkan pada bagian ini.

10:13 PM 1 Comment(s) »
Read More

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.

6:51 PM 3 Comment(s) »
Read More

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.

3:59 PM 1 Comment(s) »
Read More
Subscribe to: Posts (Atom)
Optional Side Ad Optional Side AdOptional Side AdOptional Side Ad