XHTML Blogger - Seksi Posting

Wednesday, October 15, 2014

Dalam Konsep

Konten Halaman:

1. Prolog
2. Detail
   1. Judul Posting
   2. Badan/Konten Posting
   3. Footer/Catatan Kaki Posting
   4. Jump Link/Read More Link

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>

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	https://www.custom_link_url.com
data:post.url	Elemen ini akan menghasilkan URL posting	https://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	https://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	https://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	https://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	https://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 »

Pasang Iklan Anda di Sini

Pasang Iklan Anda di Sini