Tata Letak Struktur Elemen HTML Template Halaman Posting

Info informasi Tata Letak Struktur Elemen HTML Template Halaman Posting atau artikel tentang Tata Letak Struktur Elemen HTML Template Halaman Posting ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

Demikian artikel tentang Tata Letak Struktur Elemen HTML Template Halaman Posting ini dapat kami sampaikan, semoga artikel atau info tentang Tata Letak Struktur Elemen HTML Template Halaman Posting ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik