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 :

Edit HTML image



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 DATAFUNGSI TAMPILANHASIL TAMPILAN
data:post.linkElemen ini akan menghasilkan tautan lampiran yang nilainya Anda atur melalui editor postinghttp://www.custom_link_url.com
data:post.urlElemen ini akan menghasilkan URL postinghttp://nama_blog.blogspot.com/2012/11/lorem-ipsum.html
data:post.titleElemen ini akan menghasilkan judul postingLorem 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 DATAFUNGSI TAMPILAN
data:post.idElemen ini akan menampilkan ID posting
data:post.bodyElemen ini akan menampilkan konten posting
data:post.snippetElemen ini akan menghasilkan ringkasan posting dalam 100 kata +
data:post.authorPhoto.urlElemen ini akan menghasilkan URL gambar foto profil penulis
data:post.authorProfileUrlElemen ini akan menghasilkan URL profil penulis
data:post.authorAboutMeElemen 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 DATAFUNGSI TAMPILAN
data:top.authorLabelLabel keterangan sebelum nama penulis
data:post.authorElemen ini akan menghasilkan nama penulis
data:top.timestampLabelLabel keterangan sebelum waktu penerbitan
data:post.timestampElemen ini akan menampilkan waktu penerbitan dalam format timestamp
data:post.addCommentUrlElemen ini akan menampilkan URL posting dengan tambahan hash [#comment-form]
data:postLocationLabelElemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan posting
data:post.location.mapsUrlElemen ini akan menghasilkan URL lokasi dalam peta Google
data:post.location.nameElemen 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 Indriyani
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 >>
= TERIMA KASIH =

9 komentar

  1. wah cukup munyeng nih mbk kepala saya, ingin memahami tapi gak paham juga. bener-bener gak bakat nih saya. hehee

    BalasHapus
    Balasan
    1. hehe...maaf mas hanya berbagi untuk tempat belajar saja, sama sekali gak ada niat supaya buat pusing atau munyeng

      Hapus
  2. sip,..bgus buat belajar,,edit..kulit blog..! (h)

    untuk home Mba Dev..! dgn css yg mengikutinya..!,,, bagaimana jg klw gambr di home dimuncul it disebabkan oleh apa ya,..!

    BalasHapus
    Balasan
    1. maaf mas, yang mas maksud itu saya kurang paham, yang mas maksud gambar muncul pada home itu apa? (maksudnya pada home blog siapa?)

      Hapus
    2. maap klw tdk keberatn jaln2 ke blog sy...coba liat kendala di mana y..

      Hapus
    3. biasanya pada home beranda,ada posting yang tampil, tetapi pada home blognya mas, tidak ada sama sekali, yang tampil itu berupa widget related post,

      apakah tampilan home sengaja dihilangkan daftar posting-nya atau gimana mas?

      Hapus
  3. Asyik juga nieh belajar struktur element halaman posting. Selama ini enggak terlalu diperhatiin, mbak. Terima kasih sharenya mbak...

    BalasHapus
  4. Jujur mbak, saya rada takut setelah main adsense. Sebab salah salah nanti malah kena banned. Jadi belajar yang seperti ini juga sepertinya disunnahkan agar nanti tidak salah ini itu. Sampai saat ini saya cuma belajar lewat inspect element kalau mau merubah sesuatu. Kudu beli buku kode html kayaknya.. :>)

    BalasHapus
    Balasan
    1. semuanya tentang keberanian dan paham akan apa yang terjadi, jika sudah didasari dengan takut, maka sampai kapanpun hal yang ingin kita kuasai dan pahami tidak akan pernah kita dapatkan.

      dalam mengelola blog sangat mudah, terutama bermain dengan HTML kode script, hal yang terpenting adalah, kita tahu setiap atribut pembuka dan tag penutupnya akan menampilkan apa pada blog, Karena tanpa kita sadari mungkin banyak kode yang tidak terpakai saat ini pada template, namun karena kita takut merubahnya, kode tersebut tetap berada disana, padahal tidak berarti apa-apa sekalipun kode tersebut kita hapus, sehingga yang terjadi Loading blog menjadi berat.

      Hapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK