Elemen Data HTML Template Halaman Komentar

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)

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>&#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)

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>

KETERANGAN DAN FUNGSI KODE HTML HALAMAN KOMENTAR (XML Markup Element Structur)

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.

Membanned spamer di komentar dengan jquery

Kali ini saya ingin berbagi buat sobat yang udah males dan capek menghapus komentar para spammer, yang satu ini palinf buat suasana jadi males dan menjengkelkan bila hadir di komentar blog kita. jquery ini bisa sobat gunakan untuk menghapus dan membanned para spamer tersebut dengan menghilangkan isi komentar juga link profile mereka agar user lain tidak merasa terganggu.

langsung saja buat sobat yang ingin memasang jquery ini, buka template editornya dan letakkan kode jquery berikut di atas tag penutup </body>

<script type='text/javascript'>
//<![CDATA[ 
var spamlist=[
'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer' /* URL Profile spamer */
];
for(var v=0; v<spamlist.length; v=v+1){
 $("a[href='"+spamlist[v]+"']").each(function(){
 $(this).closest(".comment_inner").find(".comment_body")
 .replaceWith("<div class='.comment_body' style='color:red'>Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!</div>"),
 $(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})}
//]]>
</script>

Jika lebih dari satu profile silahkan tambahkan daftar seperti yang saya tuliskan di tas dengan di beri jeda koma (,) seperti di bawah ini

cara menambahkan url profile spamer berikutnya

<script type='text/javascript'>
//<![CDATA[ 
var spamlist=[

'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer', /* URL Profile spamer */
'http://www.blogger.com/profile/ogoh-ogoh-muke-spamer2' /* URL Profile spamer berikutnya */

];
for(var v=0; v<spamlist.length; v=v+1){
 $("a[href='"+spamlist[v]+"']").each(function(){
 $(this).closest(".comment_inner").find(".comment_body")
 .replaceWith("<div class='.comment_body' style='color:red'>Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!</div>"),
 $(this).replaceWith("<span style='color:red'>BANNED USER!</span>");
})}
//]]>
</script>

untuk kata - kata yang akan di tampilkan bisa sobat ubah dengan sesuai keinginan, ganti saja "Pergilah kelaut ente, nyelem dan jangan timbul lagi!!!" dengan kalimat milik anda sendiri.

jquery di atas di terapkan untuk komentar hack seperti blog ini untuk sobat yang menggunakan struktur komentar lama silahkan ubah class milik komentar lama. class komentar yang bisa sobat ganti yaitu

ganti class comment_inner dengan comment-block dan class comment_body dengan class comment-content pastikan semua sudah sobat ganti agar bisa berjalan dengan baik.

demikian share kali ini dari saya semoga berguna, kali ini blog sobat bisa bebas spamer...

Membuat ucapan terimakasih di bawah komentar

Pagi sobat blogger lagi liburan buat posting hiasan untuk blogger, kali ini saya mau share cara dan trik untuk membuat pesan ucapan terimakasih di bawah kotak komentar.
 

Triknya cukup mudah tinggal menambahkan css dan sedikit kode html di template sobat, langsung aja berikut ini caranya

Buka editor template blogger anda sperti biasanya, dan tekan Ctrl + F untuk menemukan kode

<b:includable id='threaded-comment-form' var='post'>

setelah anda temukan gulung kebawah dan cari kedi di bawah ini:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
     <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;pageID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <a expr:href='&quot;http://www.blogger.com/comment-iframe.g?blogID=&quot; + data:blog.blogId + &quot;&amp;amp;postID=&quot; + data:post.id' id='comment-editor-src'/>
</b:if>
<iframe class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor'/>

ada dua kode serupa seperti diatas, tapi yang membedakan adalah akhiran kode name='comment-editor' style='display: none'/> jadi lewati kode ini, ini adalah kode untuk tampilan form komentar mobile.

lalu letakkan kode berikut setelah kode di atas

<div class='db-comment-thanks'>Terima kasih telah berkomentar</div>

kemudian kita beri style kode di atas dengan css berikut, letakkan di antara css template blog anda

.db-comment-thanks {font-family:Arial, sans-serif;font-size:12px;right:27px;margin-top:-73px;padding:6px 12px;background:#f8f8f8;color:#999;border:1px solid #c9cacb;border-radius:3px;position:absolute;}

jangan lupa untuk menyesuaikan letak ucapan terimakasih ini lebih kekiri atau kanan dan atas bawahnya demgan merubah nialai pada css right:27px; margin-top:-73px;.

semogas berhasil dan membantu...

Menandai komentar admin dengan css

Buat sahabta blogger yang masih bertanya tanya tentang cara membuat tanda pada komentar admin untuk mempermudah pengunjung mencari mana komentar admin kali ini saya beri trik dan caranya.
blogger tidak memberikan ijin secara penuh untuk melakukan modifikasi penuh komentar admin, lalu bagaimana jika kita ingin membuat tampilan komentar yang berbeda pada blok komentar administrator secara keseluruhan? Dulu kita bisa menggunakan tag kondisional, tapi sekarang tidak lagi.
jadi untuk lebih mudahnya kita akan menggunakan dan memanfaatkan css tanpa javascript...

oke langsung saja simak trik di bwah ini:

Pertama buka editor template blogger

cari kode tag berikut ini dalam template sobat...

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

lalu temukan kode di bawah ini dalam area tag komentar tersebut

<b:if cond='data:comment.authorUrl'>
  <a expr:href='data:comment.authorUrl' expr:title='data:comment.author' rel='nofollow' target='_blank'><data:comment.author/></a> 
   <b:else/>
  <data:comment.author/> 
</b:if>

setelah anda temukan, letakkan kode berikut ini di bawah kode di atas

<span class='comment_author_flag'>Admin</span>

Kemudian, tambahkan kode ini di atas ]]></b:skin> atau </style>:

.comment_admin .comment_author_flag {display:inline;background:#bbb;font-size:13px;font-weight:normal;padding:2px 6px;margin-left:8px;color:#fff;border-radius:4px;text-transform:uppercase;letter-spacing:.1em}

untuk mengubah background komentar milik admin tambahkan kode css berikut ini di atas   ]]></b:skin> atau </style>:

div.comment_inner.comment_admin {background:#394549;}

jika dalam template sobat sudah ada, ganti saja warnanya dengan tampilan warna yang anda suka dengan merubah nilai pada {background:#394549;}

sekarang tinggal lihat hasilnya...

demikian saja semoga berguna dan bermanfaat sob...