Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 16 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

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 :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!