DTE :]: XHTML Blogger · Seksi Komentar

Dalam Konsep

Prolog
Detail
1. TemplatesV1
2. TemplatesV2

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

Labels: Blogger, Lanjutan

10 Comments:

Asek...bertambah ilmu lagi :D
kebetulan lagi butuh ini dalam pengedit-an template (y)

By uki, at Saturday, November 3, 2012 at 9:07:00 PM GMT+7
mantaf :-bd

By Beben Koben, at Saturday, November 3, 2012 at 11:25:00 PM GMT+7
seksi mas :-bd

By Satyapradana, at Sunday, November 4, 2012 at 8:09:00 AM GMT+7
mantep nih bang :-bd

By dauz, at Sunday, November 4, 2012 at 12:36:00 PM GMT+7
selamat malam mas sebelumnya semoga puasanya lancar2 saja...

mas taufik saya mau bertanya mas button reply pada from komentar saya tidak berfungsi kira2 penyebabnya apa ya mastaufik kalau boleh saya minta tolong silahkan mas taufik chek sebentar mas..

http://imronfhatoni94.blogspot.com

By Imron Fhatoni, at Friday, July 12, 2013 at 7:19:00 PM GMT+7
⇒ /2012/05/fitur-thread-comment-berhasil-tampil.html

By Taufik Nurrohman, at Monday, July 15, 2013 at 10:29:00 AM GMT+7
wah udah ditambahin ternyata xD

By Damar Zaky, at Saturday, August 17, 2013 at 2:35:00 AM GMT+7
Sudah, tadi malem kwkwkwkwkwk.....

By Kang Kapuk, at Saturday, August 17, 2013 at 2:45:00 AM GMT+7
mas yang [url=#ref-215]Back Link Kontainer[/url] itu maksudnya yang ini ya:

[url=https://support.google.com/blogger/answer/42552]Backlink Tags[/url]

By Cheesy Martabak, at Saturday, January 17, 2015 at 8:30:00 AM GMT+7
Yop. Tapi kalau yang itu untuk templat klasik.

By Taufik Nurrohman, at Tuesday, January 20, 2015 at 8:30:00 PM GMT+7

DTE :]

Saturday, November 3, 2012

XHTML Blogger · Seksi Komentar

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

10 Comments:

Post a Comment

About

About Me

Previous