Elemen Data HTML Template Halaman Komentar - Kode-kode elemen data HTML berikut bukan untuk Anda gunakan pada Template blog Anda, karena pada umumnya struktur dan tata letak kode HTML seperti ini sudah terdapat pada template blog untuk mengatur tampilan halaman komentar. Mungkin ada beberapa kode yang tidak sama seperti yang Anda gunakan di template blog Anda, karena sudah terjadi beberapa perubahan seiring Validasi HTML untuk konsep versi template.
Lebih jelasnya baca Pengertian HTML Template Berdasarkan Versi.
Dalam konsep versi template, struktur elemen data HTML pada halaman komentar pada umumnya seperti ini:
Elemen Data Pada Template Versi-1
Elemen Data Pada Template Versi-2
Halaman komentar biasanya dibentuk dengan elemen <b:includable>, jika pada versi-versi template terjadi perubahan, mungkin hanya bertambah satu elemen saja, sehingga bentuk konsep kodenya kurang lebih menjadi seperti ini:
Sehingga menghasilkan deklerasi elemen data untuk mengatur bentuk tampilan HTML Template pada seksi komentar yang pada umumnya digunakan saat ini.
PENGENALAN FUNGSI ELEMEN DATA
1. Judul Komentar
Pada halaman blog tampilan ini biasanya berupa elemen heading (H4) untuk menampilkan sebuah tulisan yang menunjukkan berapa jumlah komentar, pada HTML Template kodenya seperti ini:
2. Navigasi Jumlah Komentar
Fungsi elemen pada navigasi ini hanya akan ditampilkan yang apabila jumlah angka pada halaman komentar sudah mencapai batas angka yang sudah ditentukan (jika sudah melebihi 200 comment), <span class='paging-control-container'>.
3. Daftar Komentar
Menghasilkan urutan daftar komentar yang telah masuk atau yang sudah ditampilkan oleh author (untuk komentar moderasi). Jika pada template elemen ini dibentuk dengan definition list atau ordered list seperti ini:
4. Halaman Komentar (Footer)
Fungsi elemen pada halaman ini, biasanya mengatur deskripsi pesan komentar dan formulir komentar, umumnya berbentuk seperti ini:
Semoga penjabaran struktur Elemen Data HTML Template diatas, dapat memudahkan sahabat semua pecinta SAHABAT BLOGGER 77 dalam Belajar Mengenal Bahasa Markup HTML Template, sehingga akan lebih mudah untuk melakukan peng-editan tampilan halaman komentar blog jika sewaktu-waktu Anda butuhkan.
Lebih jelasnya baca Pengertian HTML Template Berdasarkan Versi.
Dalam konsep versi template, struktur elemen data HTML pada halaman komentar pada umumnya seperti ini:
Elemen Data Pada Template Versi-1
<b:includable id='comment-form' var='post'>
<div class='comment-form' id='comment-form'>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup' style='width:100px;height:20px;'/>
</b:if>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
<div class='comment-form' id='comment-form'>
<h4 id='comment-post-message'><data:postCommentMsg/></h4>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup' style='width:100px;height:20px;'/>
</b:if>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
Elemen Data Pada Template Versi-2
<b:includable id='threaded-comment-form' var='post'>
<div class='comment-form' id='threaded-comment-form'>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
<div class='comment-form' id='threaded-comment-form'>
<b:if cond='data:mobile'>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'/>
<b:else/>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
</b:if>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>', '<data:post.communityId/>');
</script>
</div>
</b:includable>
Halaman komentar biasanya dibentuk dengan elemen <b:includable>, jika pada versi-versi template terjadi perubahan, mungkin hanya bertambah satu elemen saja, sehingga bentuk konsep kodenya kurang lebih menjadi seperti ini:
<b:includable id="comments">
//perubahan konsep...
<b:includable id="threaded_comments">
//perubahan konsep...
<b:includable id="threaded_comments">
Sehingga menghasilkan deklerasi elemen data untuk mengatur bentuk tampilan HTML Template pada seksi komentar yang pada umumnya digunakan saat ini.
<div class='comments' id='comments'>
1. Judul Komentar
<h4>0 Komentar:</h4>
2. Navigasi Jumlah Komentar
<span class='paging-control-container'> ... </span>
3. Daftar Komentar
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
...
</dl>
</div>
4. Halaman Komentar (footer)
<div class='comment-footer'> ... </div>
5. Backlink
<div id='backlinks-container'> ... </div>
</div>
1. Judul Komentar
<h4>0 Komentar:</h4>
2. Navigasi Jumlah Komentar
<span class='paging-control-container'> ... </span>
3. Daftar Komentar
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
...
</dl>
</div>
4. Halaman Komentar (footer)
<div class='comment-footer'> ... </div>
5. Backlink
<div id='backlinks-container'> ... </div>
</div>
PENGENALAN FUNGSI ELEMEN DATA
1. Judul Komentar
Pada halaman blog tampilan ini biasanya berupa elemen heading (H4) untuk menampilkan sebuah tulisan yang menunjukkan berapa jumlah komentar, pada HTML Template kodenya seperti ini:
<h4>
<b:if cond='data:post.numComments == 1'>1
<data:commentLabel/>:
<b:else/>
<data:post.numComments/>
<data:commentLabelPlural/>:
</b:if>
</h4>
//atau bisa diganti dengan elemen seperti ini:
<h4><data:post.commentLabelFull/>:</h4>
<b:if cond='data:post.numComments == 1'>1
<data:commentLabel/>:
<b:else/>
<data:post.numComments/>
<data:commentLabelPlural/>:
</b:if>
</h4>
//atau bisa diganti dengan elemen seperti ini:
<h4><data:post.commentLabelFull/>:</h4>
| DATA | FUNGSI TAMPILAN | HASIL |
|---|---|---|
| data:post.numComments | Elemen ini akan menghasilkan nilai berupa jumlah komentar yang telah masuk | 7 komentar |
| 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 | Fungsinya sama dengan data:commentLabel | - |
| data:post.commentLabelFull | Elemen untuk mewakili semua markup seperti diatas | 0 Comment, 7 Comments, 7 Komentar |
2. Navigasi Jumlah Komentar
Fungsi elemen pada navigasi ini hanya akan ditampilkan yang apabila jumlah angka pada halaman komentar sudah mencapai batas angka yang sudah ditentukan (jika sudah melebihi 200 comment), <span class='paging-control-container'>.
<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>
<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>
3. Daftar Komentar
Menghasilkan urutan daftar komentar yang telah masuk atau yang sudah ditampilkan oleh author (untuk komentar moderasi). Jika pada template elemen ini dibentuk dengan definition list atau ordered list seperti ini:
<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>
<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 | FUNGSI TAMPILAN | HASIL |
|---|---|---|
| data:post.avatarIndentClass | Elemen ini akan menghasilkan nama kelas indentasi avatar | avatar-comment |
| 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 | - |
| data:comment.favicon | Elemen ini akan menghasilkan favicon komentator yang tidak memiliki foto profil | Gambar logo Blogger |
| data:comment.authorAvatarImage | Elemen ini akan menghasilkan foto profil | Gambar |
| data:comment.authorUrl | Elemen ini akan menghasilkan tautan profil penulis komentar | http://Url-profile |
| data:comment.author | Elemen ini akan menghasilkan nama penulis komentar | Your-Name |
| data:commentPostedByMsg | Elemen ini akan menghasilkan label kata sebelum nama komentar | mengatakan.... |
| data:comment.url | Elemen ini akan menghasilkan URL permalink komentar | ... |
| data:comment.timestamp | Elemen ini akan menghasilkan timestamp penerbitan komentar | 12/10/14 01:15 WIB |
| data:comment.isDeleted | Berisi sebuah informasi untuk menyatakan bahwa komentar sudah dihapus | Nilai true, false |
| data:comment.body | Elemen ini akan menghasilkan badan komentar untuk menuliskan teks | Terimakasih, Bla... |
| data:comment.id | Elemen ini akan menghasilkan ID komentar berupa Angka | 1837252826... |
| data:comment.inReplyTo | Elemen ini hanya akan menghasilkan ID komentar induk, jika komentar tersebut merupakan komentar balasan dari salah satu komentar yang ada | ... |
| data:comment.authorAvatarSrc | Elemen ini akan menampilkan URL avatar komentar | http://url-image.jpg |
4. Halaman Komentar (Footer)
Fungsi elemen pada halaman ini, biasanya mengatur deskripsi pesan komentar dan formulir komentar, umumnya berbentuk seperti ini:
<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>
<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 | FUNGSI TAMPILAN |
|---|---|
| data:post.embedCommentForm | Untuk menyatakan opsi peletakkan formulir komentar tersemat di bawah posting |
| data:post.allowNewComments | Untuk menyatakan bahwa administrator memperbolehkan masuknya komentar baru |
| data:post.noNewCommentsText | Elemen ini akan menghasilkan pesan bahwa komentar baru tidak diperbolehkan (Komentar baru tidak di ijinkan) |
| data:post.addCommentUrl | Elemen ini akan menghasilkan URL komentar jendela munculan |
| data:postCommentMsg | Elemen ini akan menghasilkan label tautan pengeposan komentar (Poskan Komentar) |
Semoga penjabaran struktur Elemen Data HTML Template diatas, dapat memudahkan sahabat semua pecinta SAHABAT BLOGGER 77 dalam Belajar Mengenal Bahasa Markup HTML Template, sehingga akan lebih mudah untuk melakukan peng-editan tampilan halaman komentar blog jika sewaktu-waktu Anda butuhkan.
No comments:
Post a Comment