Membedakan Tampilan Komentar Administrator dengan Komentar Pengunjung - Blogspot

Posting ini sudah kadaluarsa.

tutorial membuat komentar admin beda warna atau tampilan

Inti dari proyek penghancuran template kita kali ini adalah dengan menerapkan sebuah tag kondisional versi lain selain tag kondisional halaman, yaitu tag kondisional authorisasi (sebut saja begitu). Bentuknya seperti ini:

<b:if cond='data:comment.author == data:post.author'>
  <!-- OBJEK -->
</b:if>

Kode <b:if cond='data:comment.author == data:post.author'> kira-kira dapat dibaca seperti ini: “Apabila penulis komentar adalah orang yang sama dengan penulis posting/Administrator situs maka…”

Nah, karena objek sasaran kita kali ini adalah tubuh posting komentar, maka kita harus mengapitkan tag kondisional tersebut di sekeliling elemen tubuh posting komentar. Pertanyaannya adalah, yang dimaksud sebagai elemen tubuh posting komentar itu yang mana??

Untuk itulah kamu harus memahami bagan posting komentar blogspot.

Dalam berkas templatemu, carilah sekumpulan kode yang tampak seperti ini:

<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>
      <b:else/>
        <data:comment.author/>
      </b:if>
      <data:commentPostedByMsg/>
    </dt>
    <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
      <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'>
      <span class='comment-timestamp'>
        <a expr:href='data:comment.url' title='comment permalink'>
          <data:comment.timestamp/>
        </a>
        <b:include data='comment' name='commentDeleteIcon'/>
      </span>
    </dd>
  </b:loop>
</dl>

Seluruh kode di atas dapat didefinisikan sebagai satu unit posting komentar. Ada beberapa buah kode yang Saya warnai. Itu adalah kode-kode yang harus kamu pahami maknanya:

KodePerwakilan
<data:comment.authorAvatarImage/>Mewakili foto profil
<data:comment.author/>Mewakili nama komentator
<data:commentPostedByMsg/>Mewakili kata “mengatakan...” atau “said...”
<data:comment.body/>Mewakili isi komentar
<b:include data='comment' name='commentDeleteIcon'/>Mewakili simbol tempat sampah yang biasa digunakan untuk menghapus komentar
<data:comment.timestamp/>Mewakili tanggal penerbitan komentar

Dari tabel tersebut kita tahu bahwa elemen <data:comment.body/> adalah tubuh posting komentar yang Saya maksudkan. Dan tahap pertama untuk mengubah tampilan komentar administrator adalah dengan mengapit kode tersebut saja dengan tag kondisional yang Saya tuliskan tadi. Namun, agar komentar nonadministrator tidak menghilang karena tag kondisional, kamu juga harus memecah elemen tersebut menjadi dua. Satu digunakan sebagai perwakilan komentar administrator, satunya lagi digunakan sebagai perwakilan komentar nonadministrator.

Kita cari elemen <data:comment.body/> yang masih bebas yaitu yang berada di tempat paling bawah:

  ...
    ...
      <data:comment.body/>
    </p>
  </b:if>
</dd>

Ganti kode yang Saya beri tanda dengan kode ini:

<b:if cond='data:comment.author == data:post.author'>
  <div class='komentar-admin'><data:comment.body/></div>
</b:if>
<b:if cond='data:comment.author != data:post.author'>
  <data:comment.body/>
</b:if>

Dari kode di atas bisa kamu lihat bahwa Saya telah memecah elemen <data:comment.body/> menjadi dua. satu Saya bebaskan, dan yang satunya lagi Saya apit dengan kode <div class='komentar-admin'> ... </div>.

Pada elemen yang Saya apitkan terdapat kelas komentar-admin. Nah, dengan modal kelas itulah kamu bisa membuat perbedaan tampilan komentar. Salin kode CSS di bawah ini, kemudian letakkan di atas kode ]]></b:skin> atau </style>:

.komentar-admin {
  color:red;
  font-size:120%;
}

Kode di atas akan membuat teks komentar administrator berubah warna menjadi merah dan sedikit membesar. Untuk efek-efek tampilan lainnya bisa kamu pelajari dalam di blog ini.

Selesai. Klik Simpan Template.

Catatan: Hendaknya saat kamu menerapkan modifikasi ini, jangan sekali-kali kamu mengganti nama tampilan (penanda tangan) terbitan postingmu. Hal ini akan membuat sistem pembedaan tampilan ini menjadi tidak berfungsi. Sekali Taufik Nurrohman, harus tetap dituliskan sebagai Taufik Nurrohman. Jangan diganti-ganti, meski sekedar membubuhkan simbol-simbol tertentu di samping namamu.

16 Komentar

  • Taufik Nurrohman

    Mohon maaf apabila ada sedikit perbedaan teori, karena sebagian besar tutorial semacam ini lebih sering menggunakan sistem <b:if> dan </b:else>, sedangkan Saya di sini menggunakan sistem <b:if> dan </b:if>, tujuannya tidak lain adalah agar kalian para pembaca menjadi lebih mengerti cara kerja sistem ini. (Atau malah jadi tambah bingung??)

  • Andi AF Studio

    waaaaaaaaaaaaaaaaah... kolomnya makin bikin saya stress aja nih.. :D izinkan saya mencolong scriptnya ya pak guruuu.. :D

  • Admin 3

    mudah dipahami gan , makasih ya??, saya peraktekin nih mdh2n berhasil,hehe..!! :D

  • Raindra

    kang ma'af nih saya keluar dari pembahasan di atas,mau nanya eh mau minta cara membuat komentar tersembunyi kaya di blognya akang yang http://latitudu.blogspot.com/ dan reply kaya disqus bisa ga soalnya kepengen bangen nih atau kirim saja ke emailku raindra1979[at]gmail[dot]com bila tidak merepotkan saya tunggu yah kang makasih sebelumnya

  • NEDI ARWANDI

    Ini dia yg ana cari, siiiiiip dah empat jempol dah buat mas'y....

  • ICHINK.WEB.ID

    Nek jika wordpress kepriwe mas?

  • Taufik Nurrohman

    @Manusia Biasa: Haduh, ra ngerti Aku!

  • Unknown

    kok di blog saya gak bisa ya?? bisa kasih solusi gak bang???? gimana cara memperbaikinya bang?? supaya bisa menerapkan ini di komentar saya... pliiess, saya sudah cari tutor yang lainnya tapi tetap saja tidak berhasil,,,, :(

  • tipasundan

    "urang seneng yeuh blog".. mantap gan setiap tutorialnya disajikan dengan beda. supaya blogger juga bisa paham element scrip stiap halaman apalah itu saya juga lagi belajar nih..hehe.. kalu tutorial di sajikan dengan instan tinggal copas ga ngerti-ngerti . haturnuhun sob :-bd . sesekali mampir sob di blog sederhana saya. :)

  • Taufik Nurrohman

  • Bayu Handono

    Komentar ini telah dihapus oleh pengarang.

  • Damar Zaky

    gan ini work di threaded comment nggak??

  • Odingk Prakoso

    Yesss berhasill,, thx yahhh soobb..

  • Unknown

    mas taufik.. nanya nih tentang CSS comment, punya saya nih css ga konsisten,,
    Ex:
    .comments .comment-block,.comments .comments-content .comment-replies,.comments
    .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#F0F0E2;padding:10px}
    .comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
    banyak bnget yg sama gitu,, bedanya apa.. =p*

  • Unknown

    Ini yang dicari cari sejuta umat :D

Komentar telah ditutup.