XHTML Blogger · Seksi Komentar
Tabel Konten
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> 
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a> 
<data:post.commentRangeText/> 
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a> 
<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 + "_comments-block-wrapper"'>
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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 + "_backlinks-container"'>
<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>
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>
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 | ??? | ... |
10 Komentar
uki
Asek...bertambah ilmu lagi :D
kebetulan lagi butuh ini dalam pengedit-an template (y)
Beben Koben
mantaf :-bd
Unknown
seksi mas :-bd
dauz
mantep nih bang :-bd
Imron Fhatoni
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
Taufik Nurrohman
⇒ /2012/05/fitur-thread-comment-berhasil-tampil.html
Damar Zaky
wah udah ditambahin ternyata xD
Kang Kapuk
Sudah, tadi malem kwkwkwkwkwk.....
Cheesy Martabak
mas yang Back Link Kontainer itu maksudnya yang ini ya:
Backlink Tags
Taufik Nurrohman
Yop. Tapi kalau yang itu untuk templat klasik.