Desain Template Blogger: Struktur Sebuah Template Blogger

Desain Template Blogger: Tutorial 1
<< Pengenalan: Tutorial untuk Desain Template Blogger
>> Tutorial 2: Struktur Kode Template Blogger
Kembali ke Daftar Isi


Sebelum merancang template, Anda harus memiliki pengetahuan tentang struktur dasar template. Secara umum, struktur sebenarnya dari setiap template tidak persis sama. Tapi, dengan mengetahui struktur dasar, Anda dapat dengan mudah mendapatkan ide tentang bagaimana untuk mengedit template yang sudah ada, mendesain template, dan bagaimana mengubahnya menjadi struktur yang berbeda.


Beberapa bagian struktur template tampak jelas dapat Anda lihat pada kebanyakan blog: header, footer, dan bagian posting. Tapi ada beberapa bagian (Saya akan menyebutnya dengan blok bagian atau kontainer) yang tidak terlihat pada layar komputer, tetapi merupakan HTML penting - cara mudah untuk membangun template kerja praktis dan tepat.

Untuk memulai, struktur template pada dasarnya berisi blok kontainer yang terlihat seperti ini:


Mulai dari yang blok terbesar sampai blok terkecil:
  1. Body
: blok terluar adalah Body template Anda (pada dasarnya semua yang tampil pada layar komputer).
  • Outer-wrapper
  • : kontainer ini menutupi seluruh template Anda (bagian dari batas luar template). Secara umum, Anda membangun sebuah wrapper/pembungkus untuk menempatkan beberapa blok yang lebih kecil di dalamnya. Blok yang paling umum di dalam Outer-wrapper ini adalah Header, Content, dan Footer.
  • Header
  • : blok ini adalah bagian paling atas dari blok. Didalam Header dapat juga memiliki sub-blok, misalnya: Header Judul blok, Deskripsi blog, dan lain-lain seperti banner Adsense, menu bar, dll. Diluar header atau untuk membungkus semua sub-blok di dalam header biasanya dinamakan Header-wrapper.
  • Content/Isi
  • : dibawah Header adalah Content-wrapper - Pada dasarnya merupakan bagian dari blok yang paling penting. Secara umum bagian wrapper ini didalamnya terdiri dari blok Sidebar (bisa 1, 2 atau lebih sidebar) dan blok Main (yang berisi posting Anda, komentar, atau beberapa iklan).
  • Footer
  • : adalah bagian bawah dari template. Seperti pada bagian Header, dibutuhkan juga Footer-wrapper yang berisi bagian/sub-blok dari Footer.
  • Main
  • : Main-wrapper adalah bagian luar dari blok Main yang didalamnya terdapat Content-wrapper. Didalam Main-wrapper terdapat blok Post, blok Comment, Date Header, dan bagian lain yang dapat dibuat dari opsi Add Page Element.
  • Sidebar
  • : adalah bagian yang dapat berisi semua widget dan biasanya terletak dibagian samping, seperti: About Me, Labels, Archive, Text, HTML, Adsense, etc. Didalam standard template dari Blogger, biasanya ditemukan 1 sidebar, jika terdapat 1 sidebar maka template terdiri dari 2 kolom, yaitu Main dan Sidebar. Tetapi jumlah sidebar dapat ditambahkan dengan mudah. Yang paling umum adalah memiliki 2 sidebar atau berarti template memiliki 3 kolom. Dengan mengikuti seri tutorial ini diharapkan, nantinya kita dapat mengerti struktur dari template dan dengan mudah menambah atau memindah sidebar kekiri atau kanan.
  • Blog Post
  • : blok ini berisi bagian yan paling penting, seperti Posts Titles (judul artikel), Post (artikel), Post Author (Penulis artikel), Labels (label), etc. Struktur dari template blogger, jika dilihat secara hierarki, mulai dari bagian yang paling besar ke bagian yang paling kecil, dapat ditampilkan sebagai berikut:
    • 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 biasa disebut Post Body)
          • Post Footer (Author, Labels, dll)
        • Comments
        • Feed Link
        • Other widgets (biasanya untuk iklan)
    • Footer-wrapper
      • Footer text (disclaimer, copyrights, etc)
      • Other widgets
    Setelah memahami struktur diatas, akan lebih mudah untuk memahami struktur kode dari templatenya Blogger. Belajar struktur kode dari template sebenarnya tidak belajar tentang HTML atau CSS, tetapi lebih terhadap bagaimana kode tersebut disusun dan terorganisir. Dengan memahami struktur dari template, walaupun punya pengetahuan yang minim terhadap pemrograman web, kita dapat mengubah template atau mendesain sesuai dengan selera.


    ___________________
    Sumber: Our Blogger Templates

    Artikel Sejenis



    2 comments:

    1. Ok banget, ................ sederhana dan jelas, semangat terus Gan.

      ReplyDelete

    Pembaca Setia

    Apakah artikel dalam blog ini bermanfaat bagi anda?

    Berlangganan

    cek email anda untuk link verifikasi berlangganan setelah menekan tombol submit
     
    If you're on a slow connection, try Mobile Version
    Copyright 2014 WHIZ group. Layout Design By Anshul Dudeja. All Right Reserved.