Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

XHTML Blogger · Seksi Komentar

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>

-->
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 Elemen ini akan menghasilkan kelas navigasi komentar “lebih lama” ...
data:post.newLinkClass Elemen ini akan menghasilkan kelas navigasi komentar “lebih baru” ...
data:post.olderLinkUrl Elemen ini akan menghasilkan URL komentar “lebih lama” ...
data:post.oldestLinkUrl Elemen ini akan menghasilkan URL komentar “paling lama” ...
data:post.newerLinkUrl Elemen ini akan menghasilkan URL komentar “lebih baru” ...
data:post.newestLinkUrl Elemen ini akan menghasilkan URL komentar “paling baru” ...
data:post.olderLinkText Label navigasi “komentar lama” Older
data:post.oldestLinkText Label navigasi “komentar paling lama” Oldest
data:post.newerLinkText Label navigasi “komentar lebih baru” Newer
data:post.newestLinkText Label navigasi “komentar paling baru” Newest
data:post.commentRangeText Elemen 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>
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
data:comment.authorAvatarSrc Elemen ini akan menampilkan URL avatar komentar http://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>
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' 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

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 10 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!