Desain Template Blogger: Struktur Sebuah Template Blogger

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 atau kontainer) yang tidak terlihat pada layar komputer, tetapi merupakan tag HTML yang penting.

Apabila kamu belum mengenal pemrograman HTML, silahkan menuju ke situs belajar HTML bahasa indonesia di developer.mozilla.org, atau tutorial baru berbahasa inggris oleh Ezequiel Bruni di websiteplanet.com. Kemampuan memprogram HTML dan CSS (dan mungkin sedikit PHP) merupakan prasyarat untuk mendesain template blogger.

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

    4 komentar

    1. Rizky Rizky

      izin sedot ya gan

      Balas
    2. Anonim Anonim

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

      Balas
    3. Sobat Trik Sobat Trik

      bagus ini bang

      Balas
    4. Munwap Munwap

      Izin nyimak gan. Terima kasih penjelasannyya

      Balas