Cara Membuat Template Blogger Sendiri Dari 0 [PART 2]

Untuk sepenuhnya menguasai cara membuat template blogger, belum cukup dengan mengutak-atik CSS dan HTML, seperti pada tutorial PART 1 yang telah sebelumnya dibahas. Jadi, pada bagian ini Komputoo akan menunjukkan beberapa syntax kode template dasar yang wajib diketahui oleh seorang programmer template blogger.

LIHAT JUGA : Cara Membuat Template Blogger Sendiri Dari 0 [PART 1]

Dalam sebuah template akan ditemui banyak kode HTML yang akan mengatur susunan setiap elemen dalam website. Semua kode ini bersifat statik, artinya tidak bagian ini tidak akan berubah. Kemudian di antara kode tersebut akan ditemui definisi section dari template. Definisi ini bersifat dinamis dan akan menyesuaikan dengan konfigurai blog anda sendiri. Pada umumnya, struktur terluar dari body akan terlihat seperti di bawah ini (bagian "..." adalah dimana semua definisi section berada).

<body>
    <div class='content'>
      <div class='content-outer'>
        <div class='content-inner'>
          <header>
            <div class='header-outer'>
              <div class='region-inner header-inner'>
                 ...
              </div>
            </div>
          </header>
          <div class='tabs-outer'>
              ...
          </div>
          <div class='main-outer'>
            <div class='region-inner main-inner'>
              <div class='columns-inner'>
                <div class='column-center-outer'>
                  <div class='column-center-inner'>
                      ...
                  </div>
                </div>
                <div class='column-right-outer'>
                  <div class='column-right-inner'>
                      ....
                  </div>
                </div>
              </div>
            </div>
          </div>
          <footer>
              ...
   </footer>
        </div>
      </div>
    </div>
</body>

Kode di atas adalah bentuk yang sudah disederhanakan. Pada bentuk lain, kadang ada pula template yang memiliki 2 buah sidebar. Secara keseluruhan, kira-kira bentuknya seperti ilustrasi berikut ini.

Biasanya, bagian section akan disisipkan pada setiap elemen div yang berperan sebagai inner. Sebuah section sebenarnya nanti akhirnya juga akan diterjemahkan ke bentuk HTML juga. Definisi section ini kemungkinan besar dilakukan oleh blogger untuk mempermudah proses penataan letak/layout pada saat desain. Pada tag ini, akan ditemui beberapa atribut yang mengatur cara kerjanya, antara lain:

showaddelement (yes/no) : apabila di-set yes, kita dapat menambahkan widget baru di dalam section ini.
maxwidgets : jumlah widget maksimum yang dapat berada pada section

Salah satu section yang hampir selalu ada adalah section main. Di sinilah terdapat widget utama yang bertugas menampilkan semua posting blog kita. Dalam sebuah section anda akan menemui tag <b:widget>. Ini adalah tag yang berperan sebagai wrapper/penampung widget yang sudah kita tambahkan pada saat mengatur tata letak/layout blog. Atribut yang dapat ditambahkan pada sebuah widget antara lain:

locked (true/false) : apabila true, widget tidak bisa dipindah-pindahsaat mengatur layout
visible (true/false) : apabila true, widget tidak akan terlihat saat mengatur layout

<div class='column-center-outer'>
  <div class='column-center-inner'>
     <b:section class='main' id='main' name='Main' showaddelement='no'>
       <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
          <b:includable id='main' var='top'>
           ...
          </b:includable>
          <b:includable id='backlinkDeleteIcon' var='backlink'>
           ...
          </b:includable>
          <b:includable id='backlinks' var='post'>
           ...
          </b:includable>
          <b:includable id='post' var='post'>
             ...
          </b:includable>
       </b:widget>
     </b:section>
  </div>
</div>

Lalu apa itu includable? Definisi includable bekerja layaknya sebuah prosedur/fungsi/subrutin dalam bahasa pemrograman pada umumnya. Untuk itu, includable juga hadir dengan atribut id sebagai nama fungsi dan var sebagai parameternya.

<b:includable id='post' var='post'>
   ...
</b:includable>

Lalu, kapan setiap fungsi dalam bentuk includable tersebut akan dipanggil/digunakan?
Pertanyaan yang bagus!

Setiap widget akan selalu memiliki includable bernama main. Bagian inilah yang akan dieksekusi paling awal. Dari bagian ini, sering kali akan dipaggil includable lain yang berada dalam bagian widget yang sama. Lihat cuplikan contohnya di bawah ini.

<b:section class='main' id='main' name='Main' showaddelement='no'>
 <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog' version='1' visible='true'>
  <b:includable id='main' var='top'>
   ...
   <div class='post-outer'>
     <b:include data='post' name='post'/>
     ...
   </div>
   ...
  </b:includable>
  <b:includable id='post' var='post'>
  ...
  </b:includable>

 </b:widget>
</b:section>

Pada contoh di atas, salah satu baris kode includable main mencoba memanggil includable post dengan cara memanfaatkan tag <b:include>. Pada tag tersebut terdapat atribut data yang merupakan argumen yang dikirimkan sebagai parameter. Nama dari includable yang dipanggil tersebut ditentukan dengan atribut name.

Setiap widget memiliki cara kerja yang berbeda, untuk itu includable main dari widget tersebut seringkali memiliki jenis parameter yang berbeda. Misalnya saja, untuk widget type=Blog, includable main biasanya akan memiliki parameter bernama top. Argumen dalam parameter ini berisi konfigurasi umum dalam sebuah widget bertipe Blog.

Setiap blog memiliki data global yang dapat diakses dari widget manapun. Data ini direferensikan sebagai <data:blog>. (Lihat link referensi). Selain data yang bersifat global, ada pula serangkaian data yang hanya bisa diases sepesifikdi bawah elemen berjenis widget tertentu saja. (Lihat referensinya di link ini). Di tiap objek ini terdapat beberapa properti yang bisa diakses, antara lain:

title: The blog's title.
pageType: The type of the current page. One of 'item', 'archive', or 'index'.
url: The URL of the current page.
homepageUrl: The homepage of the blog.
pageTitle: The title of the current page. This is often the blog title, but may contain additional information on archive or post pages.
encoding: The encoding to use for the blog, e.g. UTF-8.
languageDirection: Either "ltr" or "rtl" for left-to-right and right-to-left languages, respectively.
feedLinks: The autodiscovery feed links for the page header.

Misalnya dalam template Komputoo ada kode seperti ini:

<a expr:href='data:blog.url'><data:blog.url /></a>

Setelah dieksekusi di bagian home page, akan dihasilkan kode HTML seperti ini:

<a href='http://www.komputoo.pw'>http://www.komputoo.pw</a>

Dari contoh diatas saja, kita mulai mempelajari bagaimana mengakses data yang disediakan oleh blogger untuk blog kita. Yap, berikut adalah penjelasan singkat mengenai keduanya:
- <data:blog.url /> akan mengakses data secara langsung.
- <a expr:href='data:blog.url'> akan mengakses data sebagai atribut href.

Selain untuk mengakses data yang disediakan blogger,kedua metode di atas juga berlaku untuk mengakses data sebuah parameter dari includable.

<b:includable id='myincludable' var='mypost'>
  <data:mypost.title />
</b:includable>

TIPS: Cara mudah mengamati struktur ini adalah dengan Notepad++. Dengan fitur code foldingnya, kita bisa melihat masing-masing struktur secara lebih dekat, dengan menyembunyikan struktur lain yang tidak diamati.