?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

XHTML Blogger - Seksi Komentar

Dalam Konsep

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>

-->
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.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>
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://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>
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

Terakhir Diperbaharui

    1 comments

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    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 tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    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.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!