Home » , , » XHTML Blogger, Seksi Komentar

XHTML Blogger, Seksi Komentar

Dalam Konsep

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

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

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

Backlink Container

Lihat pada bagian TemplatesV1 - Backlink Container

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website
Posted by Shannenpio Cloning at 05:36
Labels: , ,

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Homtimpa - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger