Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

XHTML Blogger · Seksi Posting

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>
Data Keterangan Tampilan/Contoh 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

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>
Data Keterangan Tampilan/Contoh Tampilan
data:post.id Elemen ini akan menampilkan ID posting 3907786755150251808
data:post.body Elemen ini akan menampilkan konten posting Lorem 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.snippet Elemen 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.thumbnailUrl Elemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi s72-c http://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s72-c/1389621_gaillardia.jpg
data:post.firstImageUrl Elemen ini akan menghasilkan URL thumbnail pertama di dalam posting dalam resolusi yang sesungguhnya http://4.bp.blogspot.com/-EJgQTkZZJXY/UI1J-2tM21I/AAAAAAAAFF8/09hfALvXkVY/s1600/1389621_gaillardia.jpg
data:post.authorPhoto.url Elemen ini akan menghasilkan URL gambar foto profil penulis https://lh4.googleusercontent.com/-nxgZmVx9WAM/AAAAAAAAAAI/AAAAAAAAAAA/q7C64RWrrU0/s1600/photo.jpg
data:post.authorProfileUrl Elemen ini akan menghasilkan URL profil penulis http://www.blogger.com/profile/034065736413533XXXXX
data:post.authorAboutMe Elemen ini akan menghasilkan deskripsi profil penulis Lorem 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>
Data Keterangan Tampilan/Contoh Tampilan
data:top.authorLabel Label keterangan sebelum nama penulis Diposting oleh:
data:post.author Elemen ini akan menghasilkan nama penulis Taufik Nurrohman
data:top.timestampLabel Label keterangan sebelum waktu penerbitan pada
data:post.timestampISO8601 Elemen ini akan menampilkan waktu penerbitan dalam format timestamp ISO 8601 2012-10-28T22:42:00+07:00
data:post.timestamp Elemen ini akan menampilkan timestamp waktu penerbitan 10:42
data:post.addCommentUrl Elemen ini akan menampilkan URL posting dengan tambahan hash #comment-form http://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:postLocationLabel Elemen ini akan menampilkan label lokasi sebelum keterangan lokasi penerbitan posting Lokasi:
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 Banyumas, Indonesia

Jump Link/Read More Link

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>
Data Keterangan Tampilan/Contoh Tampilan
data:post.jumpText Elemen ini akan menampilkan teks “Baca Selengkapnya” dari pengaturan posting Read More »

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 22 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!