Tata Letak Struktur Elemen HTML Template Halaman Posting

Tata letak struktur elemen HTML Template yang mendukung penampilan posting dalam HTML adalah sebuah elemen <b:includable> ..data..</b:includable> dengan id='post', yang jika dijabarkan dengan bahasa markup HTML kurang lebih seperti ini isi data elemen tersebut:

<div class='post hentry'>
  <h2 class='post-title entry-title'>
    //Letak Judul Posting...
  </h2>
  <div class='post-body entry-content' id='post-body-87834368950900xxx'>
    //Isi Konten Artikel (body)...
  </div>
  <div class='post-footer'>
    //Menu Widget Footer...
  </div>
</div>

Namun teks judul, isi konten dan menu yang terdapat pada footer (catatan kaki) tidak akan ditampilkan nilainya pada struktur HTML Template Anda. Disini akan saya jelaskan sedikit fungsi-fungsi element tersebut yang mendukung penampilan posting pada blog Anda satu persatu, sehingga dengan cara pemahaman seperti ini, dapat memudahkan Anda dalam belajar desain/mendesain Template dengan cepat tanpa harus takut salah hapus kode-kode tertentu.
Berikut tata letak struktur elemen kode HTML Template untuk tampilan halaman posting pada blog :

LETAK JUDUL POSTING
Elemen judul pada struktur HTML Template biasanya berupa elemen heading yang memiliki kelas post-title atau entry-title seperti ini:

<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>

KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)

ELEMEN DATA	FUNGSI TAMPILAN	HASIL TAMPILAN
data:post.link	Elemen ini akan menghasilkan tautan lampiran yang nilainya Anda atur melalui editor posting	http://www.custom_link_url.com
data:post.url	Elemen ini akan menghasilkan URL posting	http://nama_blog.blogspot.com/2012/11/lorem-ipsum.html
data:post.title	Elemen ini akan menghasilkan judul posting	Lorem Ipsum

ISI ARTIKEL (BODY)
Semua teks yang terdapat pada keseluruhan isi konten tidak akan ditampilkan dalam struktur HTML Template, namun elemen untuk tampilan isi artikel berikut, akan dihasilkan berupa elemen divisi kelas post-body atau entry-content seperti ini:

<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id'>
  <data:post.body/>
  <div class='clear'/> <!-- clear for photos floats -->
</div>

KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)

ELEMEN DATA	FUNGSI TAMPILAN
data:post.id	Elemen ini akan menampilkan ID posting
data:post.body	Elemen ini akan menampilkan konten posting
data:post.snippet	Elemen ini akan menghasilkan ringkasan posting dalam 100 kata +
data:post.authorPhoto.url	Elemen ini akan menghasilkan URL gambar foto profil penulis
data:post.authorProfileUrl	Elemen ini akan menghasilkan URL profil penulis
data:post.authorAboutMe	Elemen ini akan menghasilkan deskripsi profil penulis

MENU WIDGET FOOTER
Letak widget catatan kaki (FOOTER) biasanya berisi elemen data yang memiliki kelas post-footer seperti ini:

<div class='post-footer'>

  <div class='post-footer-line post-footer-line-1'>
    <span class='post-author vcard'>
      <b:if cond='data:top.showAuthor'>
        <data:top.authorLabel/>
        <span class='fn'>
          <data:post.author/>
        </span>
      </b:if>
    </span>
    <span class='post-timestamp'>
      <b:if cond='data:top.showTimestamp'>
        <data:top.timestampLabel/>
        <b:if cond='data:post.url'>
          <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601'><data:post.timestamp/></abbr></a>
        </b:if>
      </b:if>
    </span>
    <!-- quickedit pencil -->
    <b:include data='post' name='postQuickEdit'/>
    <span class='post-comment-link'>
      <b:if cond='data:blog.pageType != &quot;item&quot;'>
        <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          <b:if cond='data:post.allowComments'>
            <a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
          </b:if>
        </b:if>
      </b:if>
    </span>
    <!-- Feature added by BTemplates.com -->
    <b:if cond='data:post.sharePostUrl'>
      <div class='post-share-buttons'>
        <b:include data='post' name='shareButtons'/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-2'>
    <span class='post-labels'> ... </span>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
    <b:if cond='data:top.showMobileShare'>
      <div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
        <a href='javascript:void(0);'><data:shareMsg/></a>
      </div>
    </b:if>
    <b:if cond='data:top.showDummy'>
      <div class='goog-inline-block dummy-container'>
        <data:post.dummyTag/>
      </div>
    </b:if>
  </div>

  <div class='post-footer-line post-footer-line-3'><span class='post-location'>
    <b:if cond='data:top.showLocation'>
      <b:if cond='data:post.location'>
        <data:postLocationLabel/>
        <a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
      </b:if>
    </b:if>
  </span> </div>

</div>

KETERANGAN DAN FUNGSI KODE HTML (XML Markup Element Structur)

ELEMEN DATA	FUNGSI TAMPILAN
data:top.authorLabel	Label keterangan sebelum nama penulis
data:post.author	Elemen ini akan menghasilkan nama penulis
data:top.timestampLabel	Label keterangan sebelum waktu penerbitan
data:post.timestamp	Elemen ini akan menampilkan waktu penerbitan dalam format timestamp
data:post.addCommentUrl	Elemen ini akan menampilkan URL posting dengan tambahan hash [#comment-form]
data:postLocationLabel	Elemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan posting
data:post.location.mapsUrl	Elemen ini akan menghasilkan URL lokasi dalam peta Google
data:post.location.name	Elemen ini akan menampilkan lokasi penerbitan posting yang telah dituliskan dalam formulir lokasi

DESAIN TEMPLATE TO THE NEXT (Referensi Themes)
➵ Pengertian HTML Template Berdasarkan Versi
➵ Belajar Mengenal Bahasa Markup HTML Template
➵ Sekilas Tentang META Tag Dalam Bahasa HTML

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Tata Letak Struktur Elemen HTML Template Halaman Posting
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/07/tata-letak-struktur-elemen-html-template-halaman-posting.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77