12.10.14
35
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

<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(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </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(&#39;<data:post.appRpcRelayPath/>&#39;, &#39;<data:post.communityId/>&#39;);
    </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">


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>



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>



KETERANGAN DAN FUNGSI KODE HTML HALAMAN KOMENTAR (XML Markup Element Structur)
DATAFUNGSI TAMPILANHASIL
data:post.numCommentsElemen ini akan menghasilkan nilai berupa jumlah komentar yang telah masuk7 komentar
data:commentLabelElemen ini akan menghasilkan label komentar singularComment, Komentar
data:commentLabelPluralElemen ini akan menghasilkan label komentar pluralComments, Komentar
data:top.commentLabelFungsinya sama dengan data:commentLabel-
data:post.commentLabelFullElemen untuk mewakili semua markup seperti diatas0 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>&#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>



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 + &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>


KETERANGAN DAN FUNGSI KODE HTML HALAMAN KOMENTAR (XML Markup Element Structur)
DATAFUNGSI TAMPILANHASIL
data:post.avatarIndentClassElemen ini akan menghasilkan nama kelas indentasi avataravatar-comment
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-
data:comment.faviconElemen ini akan menghasilkan favicon komentator yang tidak memiliki foto profilGambar logo Blogger
data:comment.authorAvatarImageElemen ini akan menghasilkan foto profilGambar
data:comment.authorUrlElemen ini akan menghasilkan tautan profil penulis komentarhttp://Url-profile
data:comment.authorElemen ini akan menghasilkan nama penulis komentarYour-Name
data:commentPostedByMsgElemen ini akan menghasilkan label kata sebelum nama komentarmengatakan....
data:comment.urlElemen ini akan menghasilkan URL permalink komentar...
data:comment.timestampElemen ini akan menghasilkan timestamp penerbitan komentar12/10/14 01:15 WIB
data:comment.isDeletedBerisi sebuah informasi untuk menyatakan bahwa komentar sudah dihapusNilai true, false
data:comment.bodyElemen ini akan menghasilkan badan komentar untuk menuliskan teksTerimakasih, Bla...
data:comment.idElemen ini akan menghasilkan ID komentar berupa Angka1837252826...
data:comment.inReplyToElemen ini hanya akan menghasilkan ID komentar induk, jika komentar tersebut merupakan komentar balasan dari salah satu komentar yang ada...
data:comment.authorAvatarSrcElemen ini akan menampilkan URL avatar komentarhttp://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>



KETERANGAN DAN FUNGSI KODE HTML HALAMAN KOMENTAR (XML Markup Element Structur)
DATAFUNGSI TAMPILAN
data:post.embedCommentFormUntuk menyatakan opsi peletakkan formulir komentar tersemat di bawah posting
data:post.allowNewCommentsUntuk menyatakan bahwa administrator memperbolehkan masuknya komentar baru
data:post.noNewCommentsTextElemen ini akan menghasilkan pesan bahwa komentar baru tidak diperbolehkan
(Komentar baru tidak di ijinkan)
data:post.addCommentUrlElemen ini akan menghasilkan URL komentar jendela munculan
data:postCommentMsgElemen 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.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Elemen Data HTML Template Halaman Komentar
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>
= TERIMA KASIH =

35 komentar

  1. Pertamak dulu ah, saya pakai komen facebook jadi cukup tahu saja. Terima kasih.

    BalasHapus
    Balasan
    1. seip dech, devy juga hanya berbagi saja kok, sehingga dengan ini banyak yang lebih memahami tentang sedikit bentuk perkodean HTML Template, jadi mereka tidak akan takut lagi akan terjadi error jika harus melakukan hal ini:

      [blockquote]* Jika kode ini dihapus, maka apa yang terhapus di blog
      *Jika kode ini ditambahkan, maka hal apa yang berubah
      *Jika kode ini di edit, maka halaman mana yang terjadi perubahan

      Setidaknya dengan ini, mereka akan sedikit lebih paham. inilah tujuan Devy membuat tutorial seperti ini.[/blockquote]

      Hapus
    2. nah inilah yg aq suka diblog ini.
      adminnya bisa njelasin secara gamblang

      Hapus
    3. karena memang mbak devy sebagai empu dan suhunya pengkodean ya kang yanto... pokoknya sukses deh buat mbak devy.....pokonya permasalahan apa aja dengan utak atik blog entar tanya di sini ajah, insya Allah mbak devy mengupas tuntas iya nggak bak hihi... mudah mudahan... Aamiin

      Hapus
    4. masih ada dan banyak kok mas DUL yang lebih suhu dari Devy, devy hanya ingin berbagi hal yang umum saja, setidaknya jika ada sahabat lain yang mencari sesuatu untuk mengubah tampilan pada blog, bisa sama-sama kita bahas disini bersama sahabat yang lain.

      [blockquote]Berbagi itu kan indah, yang tidak tahu akan menjadi mengerti, dan kalau sudah mengerti jangan lupa dengan Devy Indriyani, hehe..!![/blockquote]

      Hapus
    5. Iya makanya saya ucapkan terima kasih, karena siapa tahu elemen dari komentar blog diambil yang penting-penting terus digabung dengan elemen komentar facebook :) Saya kok baru memperhatikan ada yang pakai disque juga lo, bisa buat backlink kayaknya itu.

      Hapus
  2. Mantap lengak sekali Mbak Devy tutorial tentang element template nya
    Saya masih bingung untuk menghapal semua itu Mbak..? tapi berkat artikel
    Ini sedikit banyaknya saya mendapat pelajaran yang berharga. Suatu nanti
    Jika saya ada kesulitan pada template blog saya nanti saya minta pencerahan
    Dari Mbak Devy yah..? terima kasih yang tal terhingga *salam santun dan sejahtera :)

    BalasHapus
    Balasan
    1. Allah maaf salah ketik Mbak Devy maksud nya Lengkap.. Eeeh malah jadi
      lengak hhh. matanya sama jarinya gak kompak Mbak Devy :))

      Hapus
    2. saya juga masih belajar kok kang saud, seperti apa yang kang saud bilang, sesama blogger tidak ada salahnya jika saling berbagi.
      jadi dengan senang hati jika suati saat ada beberapa hal yang ingin kang saud tanyakan.

      Hapus
  3. kalo kang saud dan mas aldi ngerti yah.. akumah cuma bengong ajah.. oya chkme sahabatbloger77 juga 100% keren.. kalo aku ga bisa perbaikinya

    BalasHapus
    Balasan
    1. kerumah saya saja teh yuk
      nanti diperbaiki bareng2.hehehe

      Hapus
    2. eeee ada teh Santika dgn Mas Yan.!,,silahkan..silahkan Masuk,..!,
      Maap ya Lagi sakit kepala..inih... silahkan diliat2..kebetulan tuan rumah lagi keluar..

      Hapus
    3. nah itu teh santika, mas yanto sudah undang teteh kerumah, biar SEO-nya bisa diperbaikin menjadi 100%, hehe...

      Hapus
    4. Tuan rumah sudah pulang, assalamu alaikum...mas AL, bagaimana apakah rumah sudah dibersihkan, hehe..

      Hapus
    5. blom sempat VY..!, masih pusing..!, nyuci sjlah ya..?

      Hapus
  4. menartik nih mbak.
    saya mau coba belajar edit html pada komentar blog saya ah

    BalasHapus
    Balasan
    1. hanya memberikan sedikit hal yang mungkin berguna saja kok mas yan, barangkali ada seseorang yang membutuhkan tutorial ini dalam pengeditan kolom komentar.

      Hapus
    2. termasuk saya mbak..
      soalnya saya juga belajar banyak kode CSS dan HTML diblog ini

      Hapus
  5. kalau kolom komentr dikaitkan dengan JS, apa ada pengaruhnya dg efek tampilan komentar

    karna.. saat diamati.. dari susunan yg VY buat sepertinya tidak ada yg ilang..sy curiga apa mungkin dari keterkaitan dgn js ..mohon penjelasannya..Vy..!,

    BalasHapus
    Balasan
    1. pengeposan komentar menggunakan akun login saat akan berkomentar, jadi sudah pasti setiap web/blog yang memiliki halaman komentar disana terdapat perintah JS yang dikaitkan secara langsung pada template,

      namun untuk tampilan dibangun dengan CSS, jika ada kecurigaan tentang perubahan pada halaman komentar, coba mas periksa terlebih dahulu letak CSS untuk mengatur kolom komentar, mungkin ada beberapa kode yang tidak terbaca.

      Hapus
  6. Ampun atuh Neng kagak nyambung... Nyimak ah

    BalasHapus
    Balasan
    1. hehe.. tidak kenapa, yang penting devy berterimakasih sudah mau berkunjung di blog ini.

      **SELAMAT MENYIMAK**

      Hapus
  7. Aku nyimak aja deh mbak hehe

    BalasHapus
  8. hanya bisa tertegun dan kagum dengan artikel di atas...saya ndak dong soal gituan, walau sudah belajar sekan tahun... hanya nyimak saja, moga aja ada yang ketangkap...salut saya dengan mbak devi...godd luck ya...salam hangat di pagi yang indah :D

    BalasHapus
    Balasan
    1. dari kemarin dan sampai saat ini, kode-kode diatas sudah devy perhatikan tidak ada yang terbang, tetapi kenapa mau ditangkap juga ya, hehe..(just kidding).

      kelak pasti akan membutuhkan hal seperti ini mas, karena ngeblog itu bukan hanya sekedar menulis dan publikasikn, beres pekerjaan, sudah milyaran artikel yang tampil di google, dan itu adalah persaingan, jadi mau gak mau sebisa mungkin kita dipaksa untuk membuat tampilan blog menjadi seindah mungkin untuk menarik perhatian pengunjung.

      mulai dari ini,jangan takut melakukan peng-editan untuk tampilan blog.

      Hapus
  9. detil banget mba..luar biasa pemahaman templtenya
    kalo saya mumet :)

    BalasHapus
  10. mbak saya suka dengan template blog yang ini.. aslinya akan saya follow ya blognya.. :) di tunggu templatenya

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK