Struktur Elemen Template

Cara Cepat Mengenal Struktur Elemen Template - Template terbentuk oleh sebuah kerangka yang dibungkus dengan kode-kode elemen markup, seperti CSS, Script (jQuery), dan xml. Sehingga bahasa format HTML Tempalate selalu berkembang dari versi ke versi berikutnya yang lebih akurat, Perkembangan versi HTML lebih lengkapnya anda bisa lihat dibawah ini

Versi HTML


Kali ini SAHABAT BLOGGER 77 akan membahas beberapa struktur tersebut untuk mempermudah anda dalam mengenal elemen template berdasarkan konsep halaman.
Kurang lebih struktur konsepnya seperti ini:

1. Performation (Daftar Tampilan)
2. Muatan (Isi Keseluruhah Konten Halaman)
   a. Judul Post
   b. Data Konten/Elemen Artikel
   c. Catatan Kaki (Widget Footer)
   d. Link (Read More/jump link)

1. Performation (Daftar Tampilan)

Kode struktur yang menampilkan bahasa diatas biasanya akan terbungkus dengan elemen <b:includable> dengan atribut id='post'

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

<b:includable id='mobile-post' var='post'>
  ...kode elemen...                             //versi mobile//
</b:includable>

Sedangkan untuk mendukung tampilan pada posting. elemen ini berisi markup HTML seperti ini

<div class='post hentry'>
  <h2 class='post-title entry-title'>
    SAHABAT BLOGGER 77                        //Judul Artikel//
  </h2>
  <div class='post-body entry-content' id='post-body-3907786755150251808'>
    tersebut untuk mempermudah anda          //Isi Artikel//
  </div>
  <div class='post-footer'>
    Konten footer pada posting...
  </div>
</div>


2. Muatan (Isi Keseluruhah Konten Halaman)
   a. Judul Post

Meliputi banyak elemen seperti heading tag dengan atribut class='post-title' dan class='entry-title'

<b:if cond='data:post.title'>
  <h3 class='post-title entry-title'>
    <b:if cond='data:post.link'>
      <a expr:href='data:post.link'><data:post.title/></a>
    <b:else/>
      <b:if cond='data:post.url'>
        <b:if cond='data:blog.url != data:post.url'>
          <a expr:href='data:post.url'><data:post.title/></a>
        <b:else/>
          <data:post.title/>
        </b:if>
      <b:else/>
        <data:post.title/>
      </b:if>
    </b:if>
  </h3>
</b:if>

Elemen Kode	Fungsi Elemen	Hasil Tampilan
data:post.link	Kode ini akan menghasilkan tautan lampiran melalui editor posting	Biasanya link tautan akan ditandai dengan text berwarna hijau
data:post.url	Untuk menampilkan URL posting	http://sahabatblogger77.blogspot.com/2014/03/Cara-Cepat-Mengenal-Struktur-Elemen-Template Lihat Pada TAB browser anda
data:post.link	Kode ini akan menghasilkan tautan lampiran melalui editor posting	Biasanya link tautan akan ditandai dengan text berwarna hijau