XHTML Blogger, Seksi Komentar

Dalam Konsep

Konten Halaman:

Prolog
Detail
1. TemplatesV1
2. TemplatesV2

Prolog:

Seksi komentar adalah elemen <b:includable>. Pada template versi pertama, elemen <b:includable> akan dilengkapi dengan id='comments'. Pada versi ke dua, elemen <b:includable> akan dilengkapi dengan id='threaded_comments':

TemplatesV1:

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

TemplatesV2:

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

Detail:

TemplatesV1

Terdapat lima bagian utama dalam kerangka komentar pada template versi pertama yaitu header, navigasi, daftar komentar, footer komentar dan backlink:

<div class='comments' id='comments'>

  <!-- header -->
  <h4>0 Komentar:</h4>

  <!-- navigasi -->
  <span class='paging-control-container'> ... </span>

  <!-- daftar komentar -->
  <div id='Blog1_comments-block-wrapper'>
    <dl class='avatar-comment-indent' id='comments-block'>
      ...
    </dl>
  </div>

  <!-- navigasi -->
  <span class='paging-control-container'> ... </span>

  <!-- footer komentar -->
  <div class='comment-footer'> ... </div>

  <!-- kontainer backlink -->
  <div id='backlinks-container'> ... </div>

</div>

Header Komentar

Adalah sebuah elemen heading. Biasanya berupa elemen H4 dengan tulisan yang menunjukkan jumlah komentar:

<h4>
  <b:if cond='data:post.numComments == 1'>1
    <data:commentLabel/>:
  <b:else/>
    <data:post.numComments/>
    <data:commentLabelPlural/>:
  </b:if>
</h4>

<!--

Catatan: Seluruh elemen di atas juga bisa diwakili oleh satu elemen ini:
<h4><data:post.commentLabelFull/>:</h4>

-->

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.numComments	Elemen ini akan menghasilkan angka berupa jumlah komentar yang telah masuk	`3`
data:commentLabel	Elemen ini akan menghasilkan label komentar singular	`Comment`, `Komentar`
data:commentLabelPlural	Elemen ini akan menghasilkan label komentar plural	`Comments`, `Komentar`
data:top.commentLabel	Sama dengan `data:commentLabel`	`Comment`, `Komentar`
data:top.commentLabelPlural	Sama dengan `data:commentLabelPlural`	`Comments`, `Komentar`
data:post.commentLabelFull	Sebuah paket elemen untuk mewakili semua markup di atas	`0 Comment`, `4 Comments`, `4 Komentar`

Navigasi Komentar

Berupa elemen <span> dengan kelas paging-control-container. Hanya akan muncul jika jumlah komentar sudah melebihi 200 buah (?)

<b:if cond='data:post.commentPagingRequired'>
  <span class='paging-control-container'>
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
      <data:post.oldestLinkText/>
    </a>&#160;
    <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
      <data:post.olderLinkText/>
    </a>&#160;
    <data:post.commentRangeText/>&#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
      <data:post.newerLinkText/>
    </a>&#160;
    <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
      <data:post.newestLinkText/>
    </a>
  </span>
</b:if>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.commentPagingRequired	Boolean untuk menyatakan apakah navigasi komentar sudah layak ditampilkan atau tidak	`true`, `false`
data:post.oldLinkClass	???	...
data:post.newLinkClass	???	...
data:post.olderLinkUrl	???	...
data:post.oldestLinkUrl	???	...
data:post.newerLinkUrl	???	...
data:post.newestLinkUrl	???	...
data:post.olderLinkText	???	...
data:post.oldestLinkText	???	...
data:post.newerLinkText	???	...
data:post.newestLinkText	???	...
data:post.commentRangeText	???	...

Daftar Komentar

Berupa daftar komentar yang telah masuk, biasanya dibangun dengan elemen definition list atau ordered list:

<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
      <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass'
      expr:id='data:comment.anchorName'>
        <b:if cond='data:comment.favicon'>
          <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;'
          width='16px' />
        </b:if>
        <a expr:name='data:comment.anchorName'/>
        <b:if cond='data:blog.enabledCommentProfileImages'>
          <data:comment.authorAvatarImage/>
        </b:if>
        <b:if cond='data:comment.authorUrl'>
          <a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a> <data:commentPostedByMsg/>
        <b:else/>
          <data:comment.author/> <data:commentPostedByMsg/>
        </b:if>
        <span class='comment-timestamp'>
          <a expr:href='data:comment.url' title='comment permalink'>
            <data:comment.timestamp/>
          </a>
          <b:include data='comment' name='commentDeleteIcon'/>
        </span>
      </dt>
      <dd class='comment-body'>
        <b:if cond='data:comment.isDeleted'>
          <span class='deleted-comment'>
            <data:comment.body/>
          </span>
          <b:else/>
            <p><data:comment.body/></p>
        </b:if>
      </dd>
      <dd class='comment-footer'></dd>
    </b:loop>
  </dl>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.postAuthorClass	???	...
data:widget.instanceId	[?]	-
data:post.avatarIndentClass	Elemen ini akan menghasilkan nama kelas indentasi avatar	`avatar-comment-indent`
data:comment.authorClass	Elemen ini akan menghasilkan nama kelas administrator	`blog-author`
data:comment.anchorName	Elemen ini akan menghasilkan deret karakter yang nantinya akan berguna sebagai pendukung permalink komentar (diawali dengan hruf `c`, dan diikuti oleh ID komentar)	`c3630901959249728956`
data:comment.favicon	Elemen ini akan menghasilkan favicon komentator yang tidak memiliki foto profil	??? [biasanya berupa logo Blogger]
data:blog.enabledCommentProfileImages	[?]	-
data:comment.authorAvatarImage	Elemen ini akan menghasilkan foto profil	Sampel
data:comment.authorUrl	Elemen ini akan menghasilkan tautan profil penulis komentar	`http://www.blogger.com/profile/0513752219663605XXXX`
data:comment.author	Elemen ini akan menghasilkan nama penulis komentar	`Taufik Nurrohman`
data:commentPostedByMsg	Elemen ini akan menghasilkan label kata kerja setelah nama komentar	`mengatakan...`, `said...`
data:comment.url	Elemen ini akan menghasilkan URL permalink komentar (URL halaman dengan akhiran berupa hash `data:comment.anchorName`	Sampel
data:comment.timestamp	Elemen ini akan menghasilkan timestamp penerbitan komentar	`Jumat, 02 November 2012 10:20:00 WIB`
data:comment.isDeleted	Boolean untuk menyatakan bahwa komentar sudah dihapus	`true`, `false` ???
data:comment.body	Elemen ini akan menghasilkan badan komentar	`Lorem ipsum dolor sit amet!`
data:comment.id	Elemen ini akan menghasilkan ID komentar (seperti `data:comment.anchorName`, tapi tanpa awalan `c`. Hanya angka)	`3630901959249728956`
data:comment.inReplyTo	Elemen ini akan menghasilkan ID komentar induk. Elemen ini hanya akan menampilkan ID komentar induk jika komentar tersebut merupakan komentar balasan dari salah satu komentar yang ada	`3630901959249728956`

Footer/Kaki Komentar

Elemen ini umumnya berisi pesan komentar dan formulir komentar:

<div class='comment-footer'>
  <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='comment-form'/>
    <b:else/>
      <data:post.noNewCommentsText/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.allowComments'>
      <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
    </b:if>
  </b:if>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.embedCommentForm	Boolean untuk menyatakan opsi peletakkan formulir komentar tersemat di bawah posting	`true`, `false`
data:post.allowNewComments	Boolean untuk menyatakan bahwa administrator memperbolehkan masuknya komentar baru	`true`, `false`
data:post.allowComments	Boolean untuk menyatakan bahwa administrator memperbolehkan pengunjung untuk berkomentar	`true`, `false`
data:post.noNewCommentsText	Elemen ini akan menghasilkan pesan bahwa komentar baru tidak diperbolehkan	`Komentar baru tidak diperbolehkan untuk posting ini.`
data:post.addCommentUrl	Elemen ini akan menghasilkan URL komentar jendela munculan (???)	...
data:post.addCommentOnclick	???	...
data:postCommentMsg	Elemen ini akan menghasilkan label tautan pengeposan komentar	`Poskan Komentar`

Backlink Container

???

<div id='backlinks-container'>
  <div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
    <b:if cond='data:post.showBacklinks'>
      <b:include data='post' name='backlinks'/>
    </b:if>
  </div>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.showBacklinks	???	...

TemplatesV2

Terdapat lima bagian utama dalam kerangka komentar pada template versi ke dua yaitu header, daftar komentar, footer komentar, popup komentar dan backlink:

<div class='comments' id='comments'>

  <!-- header -->
  <h4>0 Komentar:</h4>

  <!-- daftar komentar -->
  <div class='comments-content'>
    <script> ... </script>
    <div id='comment-holder'> ... </div>
  </div>

  <!-- footer komentar -->
  <p class='comment-footer'> ... </p>

  <!-- popup komentar -->
  <div class='comment-popup'> ... </div>

  <!-- kontainer backlink -->
  <div id='backlinks-container'> ... </div>

</div>

Header Komentar

Adalah sebuah elemen heading. Biasanya berupa elemen H4 dengan tulisan yang menunjukkan jumlah komentar:

<h4>
  <b:if cond='data:post.numComments == 1'>1
    <data:commentLabel/>:
  <b:else/>
    <data:post.numComments/>
    <data:commentLabelPlural/>:
  </b:if>
</h4>

Lihat pada bagian TemplatesV1 - Header Komentar

Daftar Komentar

Berupa daftar komentar yang telah masuk, dibangun oleh elemen-elemen ordered list di dalam elemen <div class='comments-content'>:

<div class='comments-content'>
  <b:if cond='data:post.embedCommentForm'>
    <b:include data='post' name='threaded_comment_js'/>
  </b:if>
  <div id='comment-holder'>
     <data:post.commentHtml/>
  </div>
</div>

Data	Keterangan	Tampilan/Contoh Tampilan
data:post.commentHtml	Elemen ini akan menghasikan seluruh markup daftar komentar	Sampel

Footer/Kaki Komentar

Elemen ini berisi pesan komentar dan formulir komentar:

<p class='comment-footer'>
  <b:if cond='data:post.allowNewComments'>
    <b:include data='post' name='threaded-comment-form'/>
  <b:else/>
    <data:post.noNewCommentsText/>
  </b:if>
</p>

Lihat pada bagian TemplatesV1 - Footer/Kaki Komentar

Popup Komentar

???

<b:if cond='data:showCmtPopup'>
  <div id='comment-popup'>
    <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
    </iframe>
  </div>
</b:if>

Data	Keterangan	Tampilan/Contoh Tampilan
data:showCmtPopup	???	...

Backlink Container

Lihat pada bagian TemplatesV1 - Backlink Container

XHTML Blogger, Seksi Komentar

Konten Halaman:

Prolog:

TemplatesV1:

TemplatesV2:

Detail:

TemplatesV1

Header Komentar

Navigasi Komentar

Daftar Komentar

Footer/Kaki Komentar

Backlink Container

TemplatesV2

Header Komentar

Daftar Komentar

Footer/Kaki Komentar

Popup Komentar

Backlink Container

0 komentar:

Posting Komentar

Fotografi

Photoshop

Tutorial Blog

Iklan

Random