Membuat Comment Admin berbeda

Membuat Komentar Admin Berbeda dengan Pengunjung Blog

Pada postingan kali ini, Karyavictor akan membahas bagaimana cara membedakan komentar admin dari komentar pengunjung di blog. Perbedaan ini dapat membantu pengunjung mengenali siapa pemilik atau admin blog, terutama jika blog menampilkan foto atau avatar di setiap komentar.

Sebagai contoh, pada komentar di postingan ini, nick "Karyavictor" akan menampilkan komentar dengan background yang berbeda, sehingga mudah dikenali.

Tutorial ini diperoleh dari blog Ayas saat mencari informasi melalui Google. Berikut adalah langkah-langkahnya:

Langkah-langkah Membuat Komentar Admin Berbeda

1. Login ke Blogger

Masuk ke akun Blogger Anda dengan menggunakan username dan password pribadi.

2. Masuk ke Edit HTML

  • Pilih menu Tata Letak → Edit HTML.
  • Centang kotak "Expand Widget Template" agar seluruh kode terlihat.

3. Tambahkan CSS untuk Komentar Admin

  • Cari kode berikut dengan menggunakan Ctrl + F:
    html
    ]]></b:skin>
  • Tambahkan kode berikut sebelum kode tersebut:
    css
    .comment-body-author {
    background: #ebebeb;
    border: 1px dotted #000000;
    margin: 0;
    padding: 0 0 0 20px;
}
    Keterangan:
    • background = Warna latar belakang (ubah sesuai keinginan).
    • border = Ketebalan dan jenis garis tepi.

4. Temukan Bagian Kode Komentar

  • Cari kode berikut:

    html
    <dl id='comments-block'>

  • Kode tersebut akan muncul dalam struktur seperti ini:

    html
    <dl id='comments-block'>
    <b:loop values='data:post.comments' var='comment'>
        <dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
            <a expr:name='data:comment.anchorName'/>
            <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>
        
        <b:if cond='data:comment.author == data:post.author'>
            <dd class='comment-body-author'>
                <p><data:comment.body/></p>
            </dd>
        <b:else/>
            <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>
        </b:if>

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

  • Bagian yang ditambahkan ditandai dalam baris berikut:

    html
    <b:if cond='data:comment.author == data:post.author'>
    <dd class='comment-body-author'>
        <p><data:comment.body/></p>
    </dd>

    Bagian ini memastikan bahwa komentar dari admin memiliki tampilan berbeda.

5. Simpan Perubahan

Setelah menambahkan kode, klik Simpan Template.

Kesimpulan

✔ Setelah perubahan ini, komentar admin akan memiliki latar belakang berbeda dari komentar pengunjung lainnya.
✔ Pengunjung akan lebih mudah mengenali admin blog.
✔ Anda bisa mengubah warna latar belakang dan gaya border sesuai keinginan.

Silakan coba dan lihat hasilnya di blog Anda! Jika ada pertanyaan, silakan tanyakan. 😊




Komentar

Posting Komentar