XHTML Blogger · Seksi Komentar

Tabel Konten
  1. Prolog 
    1. TemplatesV1: 
    2. TemplatesV2: 
  2. Detail 
    1. TemplatesV1 
      1. Header Komentar 
      2. Navigasi Komentar 
      3. Daftar Komentar 
      4. Footer/Kaki Komentar 
      5. Backlink Container 
    2. TemplatesV2 
      1.  
      2. Header Komentar 
      3. Daftar Komentar 
      4. Footer/Kaki Komentar 
      5. Popup Komentar 
      6. Backlink Container 

Dalam Konsep

Prolog 

Seksi komentar adalah elemen <b:includable>. Pada template versi pertama hanya terdiri dari <b:includable id="comments"> namun bertambah satu lagi yaitu <b:includable id="threaded_comments"> pada versi ke dua:

TemplatesV1: 

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

TemplatesV2: 

<b:includable id='comments' var='post'>
  ...
</b:includable>
<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>

-->
DataKeteranganTampilan/Contoh Tampilan
data:post.numCommentsElemen ini akan menghasilkan angka berupa jumlah komentar yang telah masuk3
data:commentLabelElemen ini akan menghasilkan label komentar singularComment, Komentar
data:commentLabelPluralElemen ini akan menghasilkan label komentar pluralComments, Komentar
data:top.commentLabelSama dengan data:commentLabelComment, Komentar
data:top.commentLabelPluralSama dengan data:commentLabelPluralComments, Komentar
data:post.commentLabelFullSebuah paket elemen untuk mewakili semua markup di atas0 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>
DataKeteranganTampilan/Contoh Tampilan
data:post.commentPagingRequiredBoolean untuk menyatakan apakah navigasi komentar sudah layak ditampilkan atau tidaktrue, false
data:post.oldLinkClassElemen ini akan menghasilkan kelas navigasi komentar “lebih lama”...
data:post.newLinkClassElemen ini akan menghasilkan kelas navigasi komentar “lebih baru”...
data:post.olderLinkUrlElemen ini akan menghasilkan URL komentar “lebih lama”...
data:post.oldestLinkUrlElemen ini akan menghasilkan URL komentar “paling lama”...
data:post.newerLinkUrlElemen ini akan menghasilkan URL komentar “lebih baru”...
data:post.newestLinkUrlElemen ini akan menghasilkan URL komentar “paling baru”...
data:post.olderLinkTextLabel navigasi “komentar lama”Older
data:post.oldestLinkTextLabel navigasi “komentar paling lama”Oldest
data:post.newerLinkTextLabel navigasi “komentar lebih baru”Newer
data:post.newestLinkTextLabel navigasi “komentar paling baru”Newest
data:post.commentRangeTextElemen ini akan menghasilkan teks interval halaman komentar yang sedang aktif.1 - 200

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>
DataKeteranganTampilan/Contoh Tampilan
data:post.postAuthorClass???...
data:widget.instanceId[?]-
data:post.avatarIndentClassElemen ini akan menghasilkan nama kelas indentasi avataravatar-comment-indent
data:comment.authorClassElemen ini akan menghasilkan nama kelas administratorblog-author
data:comment.anchorNameElemen 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.faviconElemen ini akan menghasilkan favicon komentator yang tidak memiliki foto profil??? [biasanya berupa logo Blogger]
data:blog.enabledCommentProfileImages[?]-
data:comment.authorAvatarImageElemen ini akan menghasilkan foto profilSampel
data:comment.authorUrlElemen ini akan menghasilkan tautan profil penulis komentarhttp://www.blogger.com/profile/0513752219663605XXXX
data:comment.authorElemen ini akan menghasilkan nama penulis komentarTaufik Nurrohman
data:commentPostedByMsgElemen ini akan menghasilkan label kata kerja setelah nama komentarmengatakan..., said...
data:comment.urlElemen ini akan menghasilkan URL permalink komentar (URL halaman dengan akhiran berupa hash data:comment.anchorNameSampel
data:comment.timestampElemen ini akan menghasilkan timestamp penerbitan komentarJumat, 02 November 2012 10:20:00 WIB
data:comment.isDeletedBoolean untuk menyatakan bahwa komentar sudah dihapustrue, false
data:comment.bodyElemen ini akan menghasilkan badan komentarLorem ipsum dolor sit amet!
data:comment.idElemen ini akan menghasilkan ID komentar (seperti data:comment.anchorName tapi tanpa awalan c. Hanya angka)3630901959249728956
data:comment.inReplyToElemen 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 ada3630901959249728956
data:comment.authorAvatarSrcElemen ini akan menampilkan URL avatar komentarhttp://lh5.googleusercontent.com/-NDqfg6Z-elM/AAAAAAAAAAI/AAAAAAAADUQ/RODYRoOPPqM/s1600/profile-photo.jpg

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>
DataKeteranganTampilan/Contoh Tampilan
data:post.embedCommentFormBoolean untuk menyatakan opsi peletakkan formulir komentar tersemat di bawah postingtrue, false
data:post.allowNewCommentsBoolean untuk menyatakan bahwa administrator memperbolehkan masuknya komentar barutrue, false
data:post.allowCommentsBoolean untuk menyatakan bahwa administrator memperbolehkan pengunjung untuk berkomentartrue, false
data:post.noNewCommentsTextElemen ini akan menghasilkan pesan bahwa komentar baru tidak diperbolehkanKomentar baru tidak diperbolehkan untuk posting ini.
data:post.addCommentUrlElemen ini akan menghasilkan URL komentar jendela munculan (???)...
data:post.addCommentOnclick???...
data:postCommentMsgElemen ini akan menghasilkan label tautan pengeposan komentarPoskan Komentar

???

<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>
DataKeteranganTampilan/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>
DataKeteranganTampilan/Contoh Tampilan
data:post.commentHtmlElemen ini akan menghasikan seluruh markup daftar komentarSampel

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' id='comment-actions' name='comment-actions' scrolling='no'>
    </iframe>
  </div>
</b:if>
DataKeteranganTampilan/Contoh Tampilan
data:showCmtPopup???...

Lihat pada bagian TemplatesV1 - Backlink Container

10 Komentar

Komentar telah ditutup.