ASTN: XHTML Blogger, Seksi Komentar
Lingkup pencarian…Bersihkan!

Berbagi tutorial blog yang dirangkum dan dibentuk dalam sebuah kode.

125 × 125125 × 125125 × 125

Tingkat Pembelajaran

Ads

300 x 250

Donasi

Pertimbangkan untuk memberikan donasi melalui PayPal jika Anda merasa bahwa artikel-artikel di blog ini bermanfaat. Terima kasih.

XHTML Blogger, Seksi Komentar

  
Cetak Sunting

Dalam Konsep

  1. Prolog
  2. Detail
    1. TemplatesV1
      1. Header Komentar
      2. Navigasi Komentar
      3. Daftar Komentar
      4. Footer/Kaki Komentar
      5. Backlink Container
    2. TemplatesV2
      1. Header Komentar
      2. Daftar Komentar
      3. Footer/Kaki Komentar
      4. Popup Komentar
      5. Backlink Container

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>

-->
DataKeteranganTampilan/Contoh Tampilan
data:post.numCommentsElemen ini akan menghasilkan angka berupa jumlah komentar yang telah masuk3
data:commentLabelElemen ini akan menghasilkan label komentar singularComment, Komentar
data:commentLabelPluralElemen ini akan menghasilkan label komentar pluralComments, Komentar
data:top.commentLabelSama dengan data:commentLabelComment, Komentar
data:top.commentLabelPluralSama dengan data:commentLabelPluralComments, Komentar
data:post.commentLabelFullSebuah paket elemen untuk mewakili semua markup di atas0 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>
DataKeteranganTampilan/Contoh Tampilan
data:post.commentPagingRequiredBoolean untuk menyatakan apakah navigasi komentar sudah layak ditampilkan atau tidaktrue, false
data:post.oldLinkClassElemen ini akan menghasilkan kelas navigasi komentar “lebih lama”...
data:post.newLinkClassElemen ini akan menghasilkan kelas navigasi komentar “lebih baru”...
data:post.olderLinkUrlElemen ini akan menghasilkan URL komentar “lebih lama”...
data:post.oldestLinkUrlElemen ini akan menghasilkan URL komentar “paling lama”...
data:post.newerLinkUrlElemen ini akan menghasilkan URL komentar “lebih baru”...
data:post.newestLinkUrlElemen ini akan menghasilkan URL komentar “paling baru”...
data:post.olderLinkTextLabel navigasi “komentar lama”Older
data:post.oldestLinkTextLabel navigasi “komentar paling lama”Oldest
data:post.newerLinkTextLabel navigasi “komentar lebih baru”Newer
data:post.newestLinkTextLabel navigasi “komentar paling baru”Newest
data:post.commentRangeTextElemen 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>
DataKeteranganTampilan/Contoh Tampilan
data:post.postAuthorClass???...
data:widget.instanceId[?]-
data:post.avatarIndentClassElemen ini akan menghasilkan nama kelas indentasi avataravatar-comment-indent
data:comment.authorClassElemen ini akan menghasilkan nama kelas administratorblog-author
data:comment.anchorNameElemen 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.faviconElemen ini akan menghasilkan favicon komentator yang tidak memiliki foto profil??? [biasanya berupa logo Blogger]
data:blog.enabledCommentProfileImages[?]-
data:comment.authorAvatarImageElemen ini akan menghasilkan foto profilSampel
data:comment.authorUrlElemen ini akan menghasilkan tautan profil penulis komentarhttp://www.blogger.com/profile/0513752219663605XXXX
data:comment.authorElemen ini akan menghasilkan nama penulis komentarTaufik Nurrohman
data:commentPostedByMsgElemen ini akan menghasilkan label kata kerja setelah nama komentarmengatakan..., said...
data:comment.urlElemen ini akan menghasilkan URL permalink komentar (URL halaman dengan akhiran berupa hash data:comment.anchorNameSampel
data:comment.timestampElemen ini akan menghasilkan timestamp penerbitan komentarJumat, 02 November 2012 10:20:00 WIB
data:comment.isDeletedBoolean untuk menyatakan bahwa komentar sudah dihapustrue, false
data:comment.bodyElemen ini akan menghasilkan badan komentarLorem ipsum dolor sit amet!
data:comment.idElemen ini akan menghasilkan ID komentar (seperti data:comment.anchorName tapi tanpa awalan c. Hanya angka)3630901959249728956
data:comment.inReplyToElemen 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 ada3630901959249728956
data:comment.authorAvatarSrcElemen ini akan menampilkan URL avatar komentarhttp://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>
DataKeteranganTampilan/Contoh Tampilan
data:post.embedCommentFormBoolean untuk menyatakan opsi peletakkan formulir komentar tersemat di bawah postingtrue, false
data:post.allowNewCommentsBoolean untuk menyatakan bahwa administrator memperbolehkan masuknya komentar barutrue, false
data:post.allowCommentsBoolean untuk menyatakan bahwa administrator memperbolehkan pengunjung untuk berkomentartrue, false
data:post.noNewCommentsTextElemen ini akan menghasilkan pesan bahwa komentar baru tidak diperbolehkanKomentar baru tidak diperbolehkan untuk posting ini.
data:post.addCommentUrlElemen ini akan menghasilkan URL komentar jendela munculan (???)...
data:post.addCommentOnclick???...
data:postCommentMsgElemen ini akan menghasilkan label tautan pengeposan komentarPoskan 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>
DataKeteranganTampilan/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>
DataKeteranganTampilan/Contoh Tampilan
data:post.commentHtmlElemen ini akan menghasikan seluruh markup daftar komentarSampel

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>
DataKeteranganTampilan/Contoh Tampilan
data:showCmtPopup???...

Backlink Container

Lihat pada bagian TemplatesV1 - Backlink Container

thumbnail
Judul: XHTML Blogger, Seksi Komentar
Diposting oleh: Astin
Publikasi: 2014-07-28T19:39:00+08:00
Peringkat: 5
Peringkat Maksimal: 5Dalam Konsep Prolog Detail TemplatesV1 Header Komentar Navigasi Komentar Daftar Komentar Footer/Kaki Komentar Backlink Container Temp...
125 × 125Pasang Iklan Anda di Sini
125 × 125Pasang Iklan Anda di Sini
 

Berlangganan

Berlangganan posting: Daftarkan alamat email Anda untuk memperoleh umpan posting terbaru langsung ke kotak masuk pesan.

FacebookGoogle+TwitterRSS

0 Komentar:

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://nama_situs.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG 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.

Klik untuk melihat kode: :) :( ^_^ :D ;) :-bd :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( :yaya: :emo19:

Konversi Kode di Sini (Jendela Munculan) Cara Berkomentar

ASTN Astin query. Adalah suatu Web yang bertemakan tutorial tentang blog khususnya (blogger / blogspot) yang akan memberikan content seputar dunia blogging secara gratis alias free/cuma"" dan akan selalu mencoba untuk belajar dan membantu dalam penyelesaian masalah mengenai apa yang belum saya dan anda ketahui tentang mengedit dan membuat suatu deretan Code yang berarti untuk anda,saya dan juga bagi para sahabat blogger lainnya,baik itu berupa code HTML, CSS dan JavaScript.

Blog/Web yang saya ikuti tidak lain adalah (www.dte.web.id) semua yang ada pada blog astn ini baik berupa desain tampilan CSS,HTML,JavaScript,dan juga sebagian content yang terdapat di sini itu semua dibuat oleh (Admin) pemilik dari blog yang saya sebutkan diatas, Saya membuat blog ASTN ini hanya untuk bahan pembelajaran saja dalam mengenal dunia Web lebih jauh dan lebih dalam lagi, bukan untuk mencari kepopuleran nama dan menjatuhkan orang lain (pemilik desain), saya selaku Admin dari blog ini mengucapkan mohon maaf yang sebesar besarnya kepada Admin www.dte.web.id jika anda merasa tidak berkenan karena saya telah lancang menyalin dan menempel begitu saja hasil desain karya anda pada blog ASTN ini.

English

Blogs / web i follow are nothing else www.dte.web.id everyone on this blog astn good design css, display of html, javascript, and also part content is here that all created by ( admin ) the owner of blog, i mentioned above i made this blog astn only learning for the course in the web world diagnosticate further and deeper again not to seek kepopuleran name and air-drop others ( owner ), design as of admin this blog, my apologies utter of magnitude to admin www.dte.web.id if you feel not acceptable because i have just lancang copy and hold the design work you on this blog astn.

Daftar Tautan

Komunitas

GitHubbloofersblogazinistcss-decksxcSOColour LoversJSFiddleCSS-Tricks
Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?

Tutup
Ke atas!
__Template Name : ( ASTN ) -->