DTE :]

Friday, November 2, 2012

XHTML Blogger · Seksi Posting

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>

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 »

Labels: ,

posted by Taufik Nurrohman at November 02, 2012

22 Comments:

Post a Comment



<< Home