XHTML Blogger · Seksi Posting

Tabel Konten
  1. Konten Halaman: 
  2. Prolog: 
  3. Detail: 
    1. Judul Posting 
    2. Tubuh/Konten Posting 
    3. Footer/Catatan Kaki Posting 
    4. Jump Link/Read More Link 

Dalam Konsep

Konten Halaman: 

Prolog: 

Elemen posting pada umumnya adalah sebuah elemen <b:includable> dengan id='post' seperti ini:

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

Pada versi mobile, Anda akan melihatnya sebagai elemen ini:

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

Elemen tersebut berisi markup HTML yang mendukung penampilan posting:

<div class='post hentry'>
  <h2 class='post-title entry-title'>
    Judul Artikel...
  </h2>
  <div class='post-body entry-content' id='post-body-3907786755150251808'>
    Konten artikel...
  </div>
  <div class='post-footer'>
    Konten footer artikel...
  </div>
</div>

Detail: 

Judul Posting 

Berupa elemen heading. Biasanya memiliki kelas post-title dan/atau 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>
DataKeteranganTampilan/Contoh 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

Tubuh/Konten Posting 

Berupa elemen divisi dengan kelas post-body dan/atau entry-content:

<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>
DataKeteranganTampilan/Contoh Tampilan
data:post.idElemen ini akan menampilkan ID posting3907786755150251808
data:post.bodyElemen ini akan menampilkan konten postingLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
data:post.snippetElemen ini akan menghasilkan ringkasan posting dalam 100 kata + ...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut ...
data:post.thumbnailUrlElemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi s72-chttp://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s72-c/1389621_gaillardia.jpg
data:post.firstImageUrlElemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi yang sesungguhnyahttp://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s1600/1389621_gaillardia.jpg
data:post.authorPhoto.urlElemen ini akan menghasilkan URL gambar foto profil penulishttps://lh4.googleusercontent.com/-nxgZmVx9WAM/AAAAAAAAAAI/AAAAAAAAAAA/q7C64RWrrU0/s1600/photo.jpg
data:post.authorProfileUrlElemen ini akan menghasilkan URL profil penulishttp://www.blogger.com/profile/034065736413533XXXXX
data:post.authorAboutMeElemen ini akan menghasilkan deskripsi profil penulisLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt.

Footer/Catatan Kaki Posting 

Berupa elemen divisi. Biasanya memiliki kelas post-footer:

<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>
DataKeteranganTampilan/Contoh Tampilan
data:top.authorLabelLabel keterangan sebelum nama penulisDiposting oleh:
data:post.authorElemen ini akan menghasilkan nama penulisTaufik Nurrohman
data:top.timestampLabelLabel keterangan sebelum waktu penerbitanpada
data:post.timestampISO8601Elemen ini akan menampilkan waktu penerbitan dalam format timestamp ISO 86012012-10-28T22:42:00+07:00
data:post.timestampElemen ini akan menampilkan timestamp waktu penerbitan10:42
data:post.addCommentUrlElemen ini akan menampilkan URL posting dengan tambahan hash #comment-formhttp://nama_blog.blogspot.com/2012/11/lorem-ipsum.html#comment-form
data:post.addCommentOnclick???...
data:top.commentLabel[?]-
data:post.numComments[?]-
data:top.commentLabelPlural[?]-
data:shareMsg???...
data:post.dummyTag???...
data:top.showLocation???...
data:post.location???...
data:postLocationLabelElemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan postingLokasi:
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 lokasiBanyumas, Indonesia

Elemen ini akan muncul saat Anda mengaktifkan jump link pada posting/memotong artikel dengan cara menyisipkan kode <!--more-->:

<b:if cond='data:post.hasJumpLink'>
  <div class='jump-link'>
    <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
      <data:post.jumpText/>
    </a>
  </div>
</b:if>
DataKeteranganTampilan/Contoh Tampilan
data:post.jumpTextElemen ini akan menampilkan teks “Baca Selengkapnya” dari pengaturan postingRead More »

22 Komentar

  • Anonim

    nah ini baru, saya tadinya mau nanya kode2 seperti ini :D
    tapi apa bedanya nulisin kode data:top.authorLabel sama kita nulis manual "Di posting oleh" bla bla bal

  • Putra

    sepintas ~
    underground404.blogspot.com/2012/06/kode-logika-blogger-blogspot.html

    belum sekomplit diatas =D

  • Unknown

    Mas dari yang saya lihat klo data:top.commentLabel akan menghasilkan tulisan comment sedangkan klo yang ini data:top.commentLabelPlural tulisannya akan jadi comments itu klo dalam bahasa inggris tidak tau klo bahasa indonya..

    • Taufik Nurrohman

      Ya, itu memang untuk keperluan bahasa yang memiliki perbedaan istilah antara bilangan singular dan plural. Orang Indonesia bisa menuliskan akhiran `komentar` setelah jumlah tanpa perbedaan:

      `0 Komentar`, `1 Komentar`, `7 Komentar`

      Tapi negara-negara tertentu tidak begitu:

      `0 Comment`, `1 Comment`, `7 Comments`
      • Anonim

        oh jadi semuanya itu menyangkut bahasa. mungkin pada saat halaman di tranaslate yah.

        • Taufik Nurrohman

          Lebih tepatnya di pengaturan bahasa dalam Dashboard Blogger. Kalau kita cuma menuliskan teks label secara langsung ke dalam template, kemungkinan yang mau memakai template kita cuma orang lokal saja karena beberapa label template tidak bisa berubah bahasa meskipun pengaturan bahasa sudah diganti.

  • Beben Koben

    good good 2 :D

  • Damar Zaky

    data:post.numComments
    itu tuh ada berapa komenya di suatu post mas :D

    • Damar Zaky

      masudku itu menunjukan jumlah komentar orang yang ada di post mas

      • Taufik Nurrohman

        Tabelnya mau Saya pindah ke artikel khusus seksi komentar. Simbol [?] maksudnya tautan lanjutan (menurut blog ini). Link akan diedit saat artikelnya sudah ada ;)

  • Unknown

    widiiw mantep nih, masih dalam konsep tp sepertinya bakalan detil banget. Gelar tiker ah, sambil nyiapin kopi \o/

    Lanjut masbro :-bd

  • tes

    mas saya mau nanya ni , jangan di ketawain ya :p* pembahasan di atas ini berguna untuk apa mas ? saya gk paham , makanya saya bertanya untuk dapat ilmu baru :D

    • EM

      permisi, menurut apa yang bisa saya tangkap, penjelasan di atas itu berguna untuk mengenal lebih jauh tentang elemen-elemen penyusun blogger.

      ini sangat bermanfaat sekali lho, terlebih bagi para blogger yang suka main koding template.

      dan juga bagi blogger awam seperti saya, bisa menambah ilmu.

  • Saeful Rahman

    Maaf mas saya ingin bertanya seputar kode HTML pada sebuah template blogger. Saya mencoba menghapus kode2 yang saya rasa tidak perlu, selama saya menghapus kode tersebut tidak ada masalah sampai saat ini.
    Berikut beberapa kode yang saya hapus pada tempe blogger :D

    Saya juga menghapus kode HTML pada mobile, karena menurut saya kode tersebut tidak penting karena sudah ada yang namanya responsive.
    <b:includable id='threaded_comment_js' var='post'/>
    <b:includable id='threaded_comments' var='post'/>
    <b:includable id='postQuickEdit' var='post'/>
    <b:includable id='shareButtons' var='post'/>
    <b:includable id='status-message'/>
    <b:includable id='feedLinks'/>
    <b:includable id='feedLinksBody' var='links'/>
    <b:includable id='iframe_comments' var='post'/>
    <b:includable id='mobile-index-post' var='post'/>
    <b:includable id='mobile-main' var='top'/>
    <b:includable id='mobile-nextprev'/>
    <b:includable id='mobile-post' var='post'/>
    <b:includable id='commentDeleteIcon' var='comment'/>
    <b:includable id='comment_count_picker' var='post'/>
    <b:includable id='comment_picker' var='post'/>
    <b:includable id='backlinkDeleteIcon' var='backlink'/>
    <b:includable id='backlinks' var='post'/>

    Gimana pendapat mas tentang hal ini, apa kegunaan dari kode2 diatas ??

    • Taufik Nurrohman

      Yang dihapus isinya saja, tapi elemen <b:includable>-nya jangan. Kalau dihapus biasanya Blogger akan mengembalikan elemen tersebut secara otomatis.

  • Unknown

    mas klau markup html buat posting kya yg di bawa ini, cara merakit code <b:includable id='post' var='post'> gmna ya :D

     <ul id="products" class="">
    <li id="product_21676348" class="product">
    <a href="/product/mkii-red-02" title="View MKII RED-02">
    <div class="product_header">
    <h2>MKII RED-02</h2>
    <span class="dash"></span>
    <h3><span class="currency_sign">$</span>610.00</h3>
    </div>
    <div class="product_thumb">
    <img src="http://images.cdn.bigcartel.com/bigcartel/product_images/144961351/max_w-560/MKIIRED_01.png" class="fade_in" alt="Image of MKII RED-02">
    </div>
    </a>
    </li>
    </ul>
    
    • Taufik Nurrohman

      Kalau harga dan ID produknya lain-lain itu agak susah untuk dibuat, karena di editor posting tidak ada bidang pengisian harga dan ID produk. Kecuali kalau markup HTML tersebut ditulis secara manual di dalam konten posting.

  • Anonim

    Min, kalau yang <data:post.timestampISO8601/> itu kan waktu publishnya, nah kalau untuk mengetahui waktu terakhir di update gimana ?

  • Anonim

    Mas cara penggunaan data:post.link
    di html editor post nya bagaimana

Komentar telah ditutup.