Membedakan Tampilan Komentar Administrator dengan Komentar Pengunjung - Blogspot

Posting ini sudah kadaluarsa.

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:

Kode	Perwakilan
<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 tutorial CSS 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.