XHTML Blogger - Seksi Komentar ·Id Tutor Plus

NAMA BLOG	URL BLOG	DESCRIPSI BLOG
KOD Blog	https://kang-onk.blogspot.com/	Konsep Blogging Sederhana
Stok Data	https://stokdata.blogspot.com/	Share something beautiful for you
Cipta Desa	http://ciptadesa.com	Seputar Informasi Tentang Desa

Friday, August 23, 2013

Dalam Konsep

Prolog
Detail
1. TemplatesV1
2. TemplatesV2

Prolog:

Seksi komentar adalah elemen <b:includable>. Pada template versi pertama, elemen <b:includable> akan dilengkapi dengan id='comments'. Pada versi ke dua, elemen <b:includable> akan dilengkapi dengan id='threaded_comments':

TemplatesV1:

<b:includable id='comments' var='post'>
  ...
</b:includable>

TemplatesV2:

<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  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	???	...
data:post.newLinkClass	???	...
data:post.olderLinkUrl	???	...
data:post.oldestLinkUrl	???	...
data:post.newerLinkUrl	???	...
data:post.newestLinkUrl	???	...
data:post.olderLinkText	???	...
data:post.oldestLinkText	???	...
data:post.newerLinkText	???	...
data:post.newestLinkText	???	...
data:post.commentRangeText	???	...

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	`https://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	`https://lh3.googleusercontent.com/-tKQ4qTt5Yg0/AAAAAAAAAAI/AAAAAAAAAAA/tUNAbGbNfPo/s96-c/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' frameborder='0' 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

Pasang Iklan Anda di Sini

1 comments

BalasHapus

toko-gw.com/kesehatan/6-tanaman-untuk-mencegah-kanker-rahim/

June 03, 2015 Permalink

terimakasih gan

Catatan :
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag KODE ANDA
Kode yang panjang bisa menggunakan tag KODE PANJANG ANDA
Untuk menyisipkan gambar, gunakan tag URL GAMBAR
Untuk menyisipkan judul, gunakan tag JUDUL ANDA DI SINI...
Untuk menciptakan efek tebal gunakan tag TEKS ANDA DI SINI...
Untuk menciptakan efek huruf miring gunakan tag TEKS ANDA DI SINI...

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.
$:\$ $\o/$ Klik untuk melihat kode!

Konversi Kode di Sini Tutorial pasang link Daftar Member Aktif